@extends('admin::layouts.master')

@section('title', $name)

@push('header')
<!-- 引入样式 -->
<!--<link rel="stylesheet" type="text/css" href="{{ asset('vendor/element-ui/index.css') }}">-->
<!-- 引入组件库 -->
<!--<script src="{{ asset('vendor/element-ui/index.js') }}"></script>-->
<!-- 引入样式文件 -->
<link rel="stylesheet" type="text/css" href="{{ plugin_resize('consult','/ui/vant.css') }}">
<script src="{{ plugin_resize('consult','/ui/vant.js')}}"></script>
<script src="{{ plugin_resize('consult','/ui/touch-emulator.js')}}"></script>
<script src="{{ plugin_resize('consult','/ui/vue-i18n.js') }}"></script>
<script src="{{ plugin_resize('consult','/json/data.js') }}"></script>
<script src="{{ asset('vendor/axios/0.27.2/axios.min.js') }}"></script>
<script src="{{ plugin_resize('consult','/ui/emoji.js') }}"></script>
@endpush
@section('content')
<div id="AppConsult" class="AppConsult">
    <el-container class="app-consult-layout">
        <el-aside class="app-consult-aside" :class="switchWidth===1?'app-consult-switch-width100':'app-consult-switch-width0'">
            <el-container class="app-consult-left">
                <el-header class="app-consult-left-menu-search">
                    <van-search v-model="menu_search" :clearable="false" shape="round" :placeholder="$t('message.service_ui.search')"></van-search>
                </el-header>
                <el-main class="app-consult-left-menu">
                    <template v-for="(item,i) in chatList.menu">
                        <template v-if="item.status">
                            <van-swipe-cell>
                                <van-cell @click="clickMenu(i+1,item,1)" :class="i===(menuSelected-1)?'app-consult-left-menu-selected':''" :border="false">
                                    <el-avatar :size="46" slot="icon" :class="item.state?'':'www-filter'" class="app-consult-left-menu-avatar" :src="item.avatar"></el-avatar>
                                    <div slot="title">
                                        <div class="app-consult-left-menu-box">
                                            <span class="app-consult-left-menu-title">${item.nickname}</span>
                                            <span class="app-consult-left-menu-time">${formatPast(item.send_time)}</span>
                                        </div>
                                    </div>
                                    <div slot="label">
                                        <div class="app-consult-left-menu-box">
                                            <span class="app-consult-left-menu-title">${item.text}</span>
                                            <van-tag round type="primary" v-if="item.new>0">${item.new}</van-tag>
                                        </div>
                                    </div>
                                </van-cell>  
                                <template #right>
                                    <van-button square type="danger" @click="deleteMenu(i,item)" :text="$t('message.service_ui.del')" class="app-consult-delete-button" />
                                </template>
                            </van-swipe-cell>
                        </template>
                    </template>
                </el-main>
                <el-footer class="app-consult-left-menu-footer">
                   <i class="bi bi-wifi" v-if="serviceConfig.online" style="font-size:26px;color:#20dd75;"></i>
                   <i class="bi bi-wifi-off" v-else style="font-size:20px;"></i>
                   <i class="bi bi-gear" style="font-size:20px;cursor:pointer;" @click="configBox"></i>
                   <van-icon name="underway-o" @click="historyOpen" style="cursor:pointer;" :size="22"></van-icon>
                   <el-switch v-model="serviceConfig.lively" class="app-consult-switch app-consult-switch-auto-config" :active-text="$t('message.service_ui.on_line')" @change="switchLink" :inactive-text="$t('message.service_ui.off_line')" :active-value="1" :inactive-value="0" active-color="#fd560f"></el-switch>
                   <el-switch v-model="serviceConfig.sound" @change="switchSound" class="app-consult-switch" :active-text="$t('message.service_ui.sound')" :inactive-text="$t('message.service_ui.mute')" :active-value="1" :inactive-value="0" active-color="#fd560f"></el-switch>
                </el-footer>
            </el-container>
        </el-aside>
        <!--内容部分-->
        <el-main class="app-consult-main" :class="switchWidth===2?'app-consult-switch-width100':'app-consult-switch-width0'">
            <el-container class="app-consult-main-content">
                <el-header class="app-consult-main-content-header">
                    <i class="el-icon-arrow-left"  @click="returnMenu" v-if="width<720" style="font-size:20px;"></i>
                    <div v-if="chatList.menu.length>0">${chatList.menu[menuSelected-1]?.nickname}</div>
                    <i class="el-icon-more"  @click="getVerbal" v-if="width<720" style="font-size:20px;"></i>
                </el-header>
                <el-main class="app-consult-main-content-box">
                    <el-header class="app-consult-main-content-box-header" v-if="chatList.menu.length>0">
                        <span class="app-consult-automatic-translation">${$t('message.service_ui.automatic_translation')}：</span>
                        <el-select v-model="chatList.menu[menuSelected-1].user_lang" class="app-consult-main-translate" :placeholder="$t('message.service_ui.user_lang')" @change="switchTranslate(chatList.menu[menuSelected-1])" size="mini">
                            <template #prefix>
                                <span class="app-consult-translate-icon"><i class="el-icon-user"></i></span>
                            </template>
                            <el-option v-for="item in language" :key="item.value" :label="$t('message.translate_language.'+item.label)" :value="item.value"></el-option>
                        </el-select>
                        <div v-if="chatList.menu[menuSelected-1].user_lang=='auto'">
                            <i class="bi bi-arrow-right-short"></i>
                        </div>
                        <div v-else>
                            <i class="bi bi-arrow-left-right"></i>
                        </div>
                        <el-select v-model="chatList.menu[menuSelected-1].service_lang" class="app-consult-main-translate" :placeholder="$t('message.service_ui.service_lang')" @change="switchTranslate(chatList.menu[menuSelected-1])" size="mini">
                            <template #prefix>
                                <span class="app-consult-translate-icon"><van-icon name="service-o" /></span>
                            </template>
                            <el-option v-for="item in language" :key="item.value" v-if="item.value!=='auto'" :label="$t('message.translate_language.'+item.label)" :value="item.value"></el-option>
                        </el-select>
                        <div v-if="chatList.menu[menuSelected-1].user_lang=='auto'"><i class="bi bi-arrow-right-short"></i></div>
                        <el-select v-if="chatList.menu[menuSelected-1].user_lang=='auto'" v-model="chatList.menu[menuSelected-1].user_language" class="app-consult-main-translate" :placeholder="$t('message.service_ui.user_lang')" @change="switchTranslate(chatList.menu[menuSelected-1])" size="mini">
                            <template #prefix>
                                <span class="app-consult-translate-icon"><i class="el-icon-user"></i></span>
                            </template>
                            <el-option v-for="item in language" :key="item.value" v-if="item.value!=='auto'" :label="$t('message.translate_language.'+item.label)" :value="item.value"></el-option>
                        </el-select>
                        <el-switch v-model="chatList.menu[menuSelected-1].translate" class="app-consult-switch app-consult-switch-auto" :active-text="$t('message.service_ui.open')" :inactive-text="$t('message.service_ui.close')" :active-value="1" :inactive-value="0" active-color="#fd560f" @change="switchTranslate(chatList.menu[menuSelected-1])"></el-switch>
                    </el-header>
                    <el-main class="www-chat-box" id="AppConsultMain">
                        <div class="app-consult-loading" v-if="chatList.loading">
                            <div class="app-consult-loading__spinner--dots">
                                <div class="app-consult-loading__dot"></div>
                                <div class="app-consult-loading__dot" style="animation-delay:0.26666666666666666s;"></div>
                                <div class="app-consult-loading__dot" style="animation-delay:0.5333333333333333s;"></div>
                            </div>
                        </div>
                        <div class="www-chat-content-box">
                          <template v-for="item in chatList.menu[menuSelected-1]?.contentDetail">
                              <template v-if="item.type===1">
                                  <div class="www-chat-content-width">
                                      <div class="www-chat-left-content">
                                          <el-avatar class="www-chat-left-avatar" :src="item.avatar"></el-avatar>
                                          <!-- 文本 -->
                                          <div class="www-chat-left-content-show" v-if="item.role===1">
                                              <div class="app-consult-newline">${item.text}</div>
                                          </div>
                                          <!-- 图片 -->
                                          <div class="www-chat-left-content-show www-chat-picture-border" v-if="item.role===2">
                                              <el-image style="max-width: 240px;" :src="item.content.url" :preview-src-list="[item.content.url]"></el-image>
                                          </div>
                                          <!-- 视频 -->
                                          <div class="www-chat-left-content-show" v-if="item.role===3">
                                              <video style="max-width: 240px;" :src="item.content.url" controls></video>
                                          </div>
                                          <!-- 商品 -->
                                          <div class="www-chat-left-content-show www-chat-picture-border" v-if="item.role===7">
                                              <div class="www-chat-shopping-detail">
                                                  <van-card :tag="item.content.trait" :currency="item.content.currency" class="www-chat-shopping-card" :price="item.content.price" :title="item.content.name" :thumb="item.content.images[0]" :origin-price="item.content.origin_price">
                                                  </van-card>
                                              </div>
                                          </div>
                                          <!-- 订单 -->
                                            <div class="www-chat-left-content-show www-chat-picture-border" v-if="item.role===9" style="padding: 0;">
                                              <div class="www-chat-shopping-detail">
                                                <van-card style="padding: 10px;" :currency="item.content.symbol_left" :num="item.content.num" :price="item.content.price" :title="item.content.name" :thumb="item.content.image">
                                                </van-card>
                                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.order_number')" :value="item.content.number" :border="false"></van-cell>
                                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.status')" :border="false">
                                                    <el-link v-if="item.content.status=='unpaid'" type="primary" :underline="false">${$t('message.service_ui.unpaid')}</el-link>
                                                    <el-link v-if="item.content.status=='paid'" type="warning" :underline="false">${$t('message.service_ui.unshipped')}</el-link>
                                                    <el-link v-if="item.content.status=='shipped'" type="warning" :underline="false">${$t('message.service_ui.shipped')}</el-link>
                                                    <el-link v-if="item.content.status=='completed'" type="success" :underline="false">${$t('message.service_ui.completed')}</el-link>
                                                    <el-link v-if="item.content.status=='cancelled'" type="info" :underline="false">${$t('message.service_ui.canceled')}</el-link>
                                                </van-cell>
                                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.addressee')" :value="item.content.shipping_customer_name" :border="false"></van-cell>
                                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.phone')" :value="item.content.shipping_telephone" :border="false"></van-cell>
                                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.shipping_address')" :value="item.content.shipping_country+item.content.shipping_zone+item.content.shipping_city+item.content.shipping_address_1+item.content.shipping_address_2" :border="false"></van-cell>
                                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.email')" :value="item.content.email" :border="false"></van-cell>
                                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.payment')" :value="item.content.payment_method_name" :border="false"></van-cell>
                                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.creation_time')" :value="item.content.created_at" :border="false"></van-cell>
                                              </div>
                                            </div>
                                      </div>
                                      <span class="www-chat-message-time-left" v-if="!item.translate">${item.send_time}</span>
                                  </div>
                                  <div class="www-chat-content-width www-chat-content-width-translate" v-if="item.translate && item.role===1">
                                      <div class="www-chat-left-content">
                                          <div class="www-chat-left-avatar"></div>
                                          <!-- 翻译 -->
                                          <div class="www-chat-left-content-show">
                                              ${item.translate}
                                          </div>
                                      </div>
                                      <span class="www-chat-message-time-left">${item.send_time}</span>
                                  </div>
                              </template>
                              <template v-else>
                                  <div class="www-chat-content-width">
                                      <div class="www-chat-right-content">
                                          <!-- 文本 -->
                                          <div class="www-chat-right-content-show" v-if="item.role===1">
                                              <div class="app-consult-newline">${item.text}</div>
                                          </div>
                                          <!-- 图片 -->
                                          <div class="www-chat-right-content-show www-chat-picture-border" v-if="item.role===2">
                                              <el-image style="max-width: 240px;" :src="item.content.url" :preview-src-list="[item.content.url]"></el-image>
                                          </div>
                                          <!-- 视频 -->
                                          <div class="www-chat-right-content-show www-chat-picture-border" v-if="item.role===3">
                                              <video style="max-width: 240px;" :src="item.content.url" controls></video>
                                          </div>
                                          <!-- 商品 -->
                                          <div class="www-chat-right-content-show www-chat-picture-border" v-if="item.role===7">
                                              <div class="www-chat-shopping-detail">
                                                  <van-card :tag="item.content.trait" :currency="item.content.currency" class="www-chat-shopping-card" :price="item.content.price" :title="item.content.name" :thumb="item.content.images[0]" :origin-price="item.content.origin_price">
                                                  </van-card>
                                              </div>
                                          </div>
                                          <div class="www-chat-right-content-show www-chat-picture-border" v-if="item.role===9" style="padding: 0;">
                                              <div class="www-chat-shopping-detail">
                                                <van-card style="padding: 10px;" :currency="item.content.symbol_left" :num="item.content.num" :price="item.content.price" :title="item.content.name" :thumb="item.content.image">
                                                </van-card>
                                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.order_number')" :value="item.content.number" :border="false"></van-cell>
                                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.status')" :border="false">
                                                    <el-link v-if="item.content.status=='unpaid'" type="primary" :underline="false">${$t('message.service_ui.unpaid')}</el-link>
                                                    <el-link v-if="item.content.status=='paid'" type="warning" :underline="false">${$t('message.service_ui.unshipped')}</el-link>
                                                    <el-link v-if="item.content.status=='shipped'" type="warning" :underline="false">${$t('message.service_ui.shipped')}</el-link>
                                                    <el-link v-if="item.content.status=='completed'" type="success" :underline="false">${$t('message.service_ui.completed')}</el-link>
                                                    <el-link v-if="item.content.status=='cancelled'" type="info" :underline="false">${$t('message.service_ui.canceled')}</el-link>
                                                </van-cell>
                                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.addressee')" :value="item.content.shipping_customer_name" :border="false"></van-cell>
                                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.phone')" :value="item.content.shipping_telephone" :border="false"></van-cell>
                                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.shipping_address')" :value="item.content.shipping_country+item.content.shipping_zone+item.content.shipping_city+item.content.shipping_address_1+item.content.shipping_address_2" :border="false"></van-cell>
                                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.email')" :value="item.content.email" :border="false"></van-cell>
                                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.payment')" :value="item.content.payment_method_name" :border="false"></van-cell>
                                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.creation_time')" :value="item.content.created_at" :border="false"></van-cell>
                                              </div>
                                            </div>
                                          <el-avatar class="www-chat-right-avatar" :src="item.avatar"></el-avatar>
                                      </div>
                                      <span class="www-chat-message-time-right" v-if="!item.translate">
                                          <span class="www-chat-message-time-right-more">
                                              <span class="www-cursor" v-if="thisTimeRevocation(item.send_time)" @click="revocationButton(item)">${$t('message.service_ui.revocation')} </span>${item.send_time} </span>
                                          <span class="www-chat-message-status" v-if="item.read_time">${ $t('message.service_ui.read') }</span>
                                        <span class="www-chat-message-status www-chat-message-status-no" v-else>${ $t('message.service_ui.unread') }</span>
                                      </span>
                                  </div>
                                  <div class="www-chat-content-width www-chat-content-width-translate" v-if="item.translate && item.role===1">
                                      <div class="www-chat-right-content">
                                          <!-- 翻译 -->
                                          <div class="www-chat-right-content-show">
                                              ${item.translate}
                                          </div>
                                          <div class="www-chat-right-avatar"></div>
                                      </div>    
                                      <span class="www-chat-message-time-right">
                                          <span class="www-chat-message-time-right-more">
                                              <span class="www-cursor" v-if="thisTimeRevocation(item.send_time)" @click="revocationButton(item)">${$t('message.service_ui.revocation')} </span>${item.send_time} </span>
                                          <span class="www-chat-message-status" v-if="item.read_time">${ $t('message.service_ui.read') }</span>
                                            <span class="www-chat-message-status www-chat-message-status-no" v-else>${ $t('message.service_ui.unread') }</span>
                                        </span>
                                  </div>
                              </template>
                          </template>
                      </div>
                    </el-main>
                </el-main>
                <el-footer class="app-consult-main-content-footer" v-if="chatList.menu.length>0">
                    <div class="app-consult-main-content-footer-other">
                        <div style="width: calc(100% - 60px);">
                            <van-notice-bar style="padding-left:0px;padding-right:0px;" wrapable :scrollable="false" background="#ffffff" color="#333333" :text="realTimeMessage"></van-notice-bar>
                        </div>
                        <el-dropdown trigger="click" placement="top-start">
                          <span class="el-dropdown-link">
                            <i slot="reference" style="margin-left:auto;font-size:18px;cursor: pointer;" class="bi bi-emoji-smile"></i>
                          </span>
                          <el-dropdown-menu style="width:202px;" slot="dropdown">
                              <template v-for="(item,i) in emojiIcon">
                            <el-dropdown-item style="width:50px;float:left;padding:0px;display:flex;align-items:center;justify-content:center;"><div style="font-size:24px;cursor:pointer;" @click="faceIcon(item)">${item}</div></el-dropdown-item>
                            </template>
                          </el-dropdown-menu>
                        </el-dropdown>
                        <el-popover style="margin-left:10px;cursor: pointer;" v-model="transferVisible" popper-class="app-consult-main-transfer" placement="top" width="200" trigger="manual">
                            <i slot="reference" style="font-size:20px;" @click="transferButton" class="bi bi-text-wrap app-consult-edit-padding"></i>
                            <template v-if="transferList.length>0">
                                <van-cell v-for="(item,i) in transferList" :key="i" :border="false" class="app-consult-main-other" :title="item.name">
                                    <i slot="icon" style="font-size:20px;" :style="{color:item.state?'#20dd75':'#c5c9c4'}" class="bi bi-record-fill"></i>
                                    <van-icon slot="right-icon" name="exchange" v-if="item.state" style="cursor:pointer;" @click="transferService(item)" size="16px"></van-icon>
                                </van-cell>
                            </template>
                            <el-empty class="app-consult-transfer" image="{{ plugin_resize('consult','/image/empty.png')}}" v-else></el-empty>
                        </el-popover>
                        <el-upload :action="uploadUrl" v-if="percentage===100" :data="{type:'consult'}" :show-file-list="false" :headers="headers" :on-progress="uploadProgress" :on-success="uploadFile" accept=".jpg,.jpeg,.png,.gif,.mp4">
                            <i style="font-size:20px;cursor: pointer;" class="bi bi-folder2"></i>
                        </el-upload>
                        <el-progress type="circle" v-if="percentage<100" :percentage="percentage" :width="20" color="#fd560f" :stroke-width="2"></el-progress>
                        <audio id="audioPlay" controls style="display:none;">
                            <source src="{{ plugin_resize('consult','/audio/inform.ogg')}}" type="audio/mpeg">
                        </audio>
                        <audio id="audioNotice" controls style="display:none;">
                            <source src="{{ plugin_resize('consult','/audio/notice.ogg')}}" type="audio/mpeg">
                        </audio>
                    </div>
                    <div class="app-consult-main-content-footer-edit">
                        <van-field v-model="content" :border="false" rows="1" autosize type="textarea" :placeholder="$t('message.service_ui.say_something')" @keydown.enter="handleKeyPress" @input="inputMonitor" @blur="blurMessage"></van-field>
                        <el-dropdown class="app-consult-push-button" size="medium" split-button type="primary" @click="pushMessage" @command="pushSelect">
                            <i class="el-icon-s-promotion"></i>
                          ${$t('message.service_ui.send')}
                          <el-dropdown-menu slot="dropdown">
                            <el-dropdown-item command="1"><i class="el-icon-check" :class="clickKey==1?'':'app-consult-push-select'"></i> ${$t('message.service_ui.press')} Enter ${$t('message.service_ui.send')}</el-dropdown-item>
                            <el-dropdown-item command="2"><i class="el-icon-check" :class="clickKey==2?'':'app-consult-push-select'"></i> ${$t('message.service_ui.press')} Ctrl+Enter ${$t('message.service_ui.send')}</el-dropdown-item>
                          </el-dropdown-menu>
                        </el-dropdown>
                    </div>
                </el-footer>
            </el-container>
        </el-main>
        <el-aside class="app-consult-aside" :class="switchWidth===3?'app-consult-switch-width100':'app-consult-switch-width0'">
            <el-container class="app-consult-right" v-if="chatList.menu.length>0">
                <div class="app-consult-info-return-icon" @click="returnChat" v-if="width<720"><van-icon name="arrow-left"></van-icon></div>
                <el-tabs v-model="tabs" class="app-consult-right-tabs">
                    <el-tab-pane :label="$t('message.service_ui.information')" name="1">
                        <div class="app-consult-right-roll-list">
                            <van-cell title="IP" :value="chatList.menu[menuSelected-1].ip" :border="false"></van-cell>
                            <van-cell :title="$t('message.service_ui.region')" v-if="chatList.menu[menuSelected-1].address" :value="chatList.menu[menuSelected-1].address" :border="false"></van-cell>
                            <van-field v-model="chatList.menu[menuSelected-1].remark" @blur="switchTranslate(chatList.menu[menuSelected-1])" rows="1" autosize :label="$t('message.service_ui.remark')" type="textarea" input-align="right" :placeholder="$t('message.service_ui.please_enter')"></van-field>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('message.service_ui.verbal_trick')" name="2">
                        <el-container class="app-consult-right">
                            <el-header class="app-consult-right-search">
                                <div style="flex-grow: 1;"><van-search v-model="verbal_search" :clearable="false" shape="round" :placeholder="$t('message.service_ui.search')"></van-search></div>
                                <div class="app-consult-info-add-icon" @click="editVerbal('add')"><van-icon name="plus"></van-icon></div>
                                <div class="app-consult-info-add-icon" @click="refreshVerbal"><i class="el-icon-refresh"></i></div>
                            </el-header>
                            <el-main class="app-consult-right-more">
                                <div class="app-consult-right-roll-list">
                                    <template v-for="(item,i) in verbalTrickList">
                                        <template v-if="item.status">
                                            <van-cell>
                                                <div slot="title" style="display:flex;gap:10px;">
                                                    <div>${item.ask}</div>
                                                </div>
                                                <div slot="label">
                                                    <div>${item.answer}</div>
                                                    <div>
                                                        <div class="app-consult-more-picture" v-for="son in item.picture">
                                                            <el-image class="app-consult-more-picture-size" :src="son.url" :preview-src-list="previewImage(item.picture)"></el-image>
                                                        </div>
                                                    </div>
                                                    <div class="app-consult-more-operate">
                                                        <el-button size="mini" icon="el-icon-position" @click="pushNews(item)">${$t('message.service_ui.push')}</el-button>
                                                        <el-button size="mini" icon="el-icon-edit" @click="editVerbal(item)">${$t('message.service_ui.edit')}</el-button>
                                                        <el-button size="mini" @click="delVerbal(item)" icon="el-icon-delete">${$t('message.service_ui.del')}</el-button>
                                                    </div>
                                                </div>
                                            </van-cell>
                                        </template>
                                    </template>
                                </div>
                            </el-main>
                        </el-container>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('message.service_ui.commodity')" name="3">
                        <el-container class="app-consult-right">
                            <el-header class="app-consult-right-search">
                                <div style="flex-grow: 1;"><van-search v-model="product_search" :clearable="false" shape="round" :placeholder="$t('message.service_ui.search')"></van-search></div>
                                <div class="app-consult-info-add-icon" @click="refreshCommodity"><i class="el-icon-refresh"></i></div>
                            </el-header>
                            <el-main class="app-consult-right-more">
                                <div class="app-consult-right-roll-list">
                                    <div v-for="item in productList">
                                        <van-card v-if="item.state" :currency="item.currency" :price="item.price" :origin-price="item.origin_price" :title="item.name" :thumb="item.images[0]">
                                            <el-button slot="num" size="mini" @click="pushProduct(item)" icon="el-icon-position">${$t('message.service_ui.push')}</el-button>
                                        </van-card>
                                    </div>
                                </div>
                            </el-main>
                        </el-container>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('message.service_ui.order')" name="4">
                        <el-container class="app-consult-right">
                            <el-header class="app-consult-right-search">
                                <div style="flex-grow: 1;"><van-search v-model="order_search" :clearable="false" shape="round" :placeholder="$t('message.service_ui.search')"></van-search></div>
                                <div class="app-consult-info-add-icon" @click="refreshOrder"><i class="el-icon-refresh"></i></div>
                            </el-header>
                            <el-main class="app-consult-right-more">
                                <div class="app-consult-right-roll-list">
                                    <div v-for="item in orderList">
                                        <template v-if="item.state">
                                            <van-card :currency="item.symbol_left" :price="item.price" :title="item.name" :thumb="item.image">
                                                <el-button slot="num" size="mini" @click="pushOrder(item)" icon="el-icon-position">${$t('message.service_ui.push')}</el-button>
                                            </van-card>
                                            <van-cell :title="$t('message.service_ui.order_number')" :value="item.number" :border="false"></van-cell>
                                            <van-cell :title="$t('message.service_ui.status')" :border="false">
                                                <el-link v-if="item.status=='unpaid'" type="primary" :underline="false">${$t('message.service_ui.unpaid')}</el-link>
                                                <el-link v-if="item.status=='paid'" type="warning" :underline="false">${$t('message.service_ui.unshipped')}</el-link>
                                                <el-link v-if="item.status=='shipped'" type="warning" :underline="false">${$t('message.service_ui.shipped')}</el-link>
                                                <el-link v-if="item.status=='completed'" type="success" :underline="false">${$t('message.service_ui.completed')}</el-link>
                                                <el-link v-if="item.status=='cancelled'" type="info" :underline="false">${$t('message.service_ui.canceled')}</el-link>
                                            </van-cell>
                                            <van-cell :title="$t('message.service_ui.addressee')" :value="item.shipping_customer_name" :border="false"></van-cell>
                                            <van-cell :title="$t('message.service_ui.phone')" :value="item.shipping_telephone" :border="false"></van-cell>
                                            <van-cell :title="$t('message.service_ui.shipping_address')" :value="item.shipping_country+item.shipping_zone+item.shipping_city+item.shipping_address_1+item.shipping_address_2" :border="false"></van-cell>
                                            <van-cell :title="$t('message.service_ui.email')" :value="item.email" :border="false"></van-cell>
                                            <van-cell :title="$t('message.service_ui.payment')" :value="item.payment_method_name" :border="false"></van-cell>
                                            <van-cell :title="$t('message.service_ui.creation_time')" :value="item.created_at" :border="false"></van-cell>
                                        </template>
                                    </div>
                                </div>
                            </el-main>
                        </el-container>
                    </el-tab-pane>
                    <el-tab-pane :label="$t('message.service_ui.footprint')" name="5">
                        <el-container class="app-consult-right">
                            <el-header class="app-consult-right-search">
                                <div style="flex-grow: 1;"><van-search v-model="footprint_search" :clearable="false" shape="round" :placeholder="$t('message.service_ui.search')"></van-search></div>
                                <div class="app-consult-info-add-icon" @click="refreshFootprint"><i class="el-icon-refresh"></i></div>
                            </el-header>
                            <el-main class="app-consult-right-more">
                                <div class="app-consult-right-roll-list">
                                    <div v-for="item in footprintList">
                                        <van-card v-if="item.state" :currency="item.currency" :price="item.price" :origin-price="item.origin_price" :title="item.name" :thumb="item.images[0]">
                                            <el-button slot="num" size="mini" @click="pushProduct(item)" icon="el-icon-position">${$t('message.service_ui.push')}</el-button>
                                        </van-card>
                                    </div>
                                </div>
                            </el-main>
                        </el-container>
                    </el-tab-pane>
                </el-tabs>
            </el-container>
        </el-aside>
    </el-container>
    <el-dialog :title="$t('message.service_ui.config')" :close-on-click-modal="false" :visible.sync="config.status">
        <el-tabs v-model="setting">
            <el-tab-pane :label="$t('message.service_ui.service')" name="1">
                <el-form :model="service.form" :rules="serviceRules" ref="serviceForm" label-position="top">
                    <el-form-item :label="$t('message.service_ui.avatar')" prop="service_avatar">
                          <el-upload class="app-service-avatar-list" action="/files" :data="{type:'avatar'}" :headers="headers" :on-success="uploadServiceAvatar" accept=".jpg,.jpeg,.png,.gif">
                              <el-avatar :size="60" :src="service.form.service_avatar"></el-avatar>
                          </el-upload>
                      </el-form-item>
                      <template v-for="(item, i) in service.form.service_nickname">
                          <el-form-item class="app-consult-more-lang-list" :label="i==0?$t('message.service_ui.nickname'):''" :prop="'service_nickname.' + i + '.value'">
                              <el-input :placeholder="$t('message.service_ui.please_enter')" v-model="item.value">
                                <template slot="prepend">${item.name}</template>
                              </el-input>
                          </el-form-item>
                      </template>
                      <div class="app-consult-translate-select">
                          <el-select v-model="current_lang" size="small">
                            <el-option v-for="(item,i) in webLang" :key="i" :label="item.name" :value="item.code"></el-option>
                          </el-select>
                          <i class="el-icon-right"></i>
                          <el-select v-model="translate_lang" size="small">
                              <el-option :label="$t('message.service_ui.all_the_others')" value="all"></el-option>
                            <el-option v-for="(item,i) in webLang" :key="i" :label="item.name" :value="item.code"></el-option>
                          </el-select>
                          <el-button type="primary" size="small" :loading="translateStatus" @click="nicknameTranslate(service.form.service_nickname)">${$t('message.service_ui.translate')}</el-button>
                      </div>
                      <template v-for="(item, i) in service.form.service_describe">
                          <el-form-item class="app-consult-more-lang-list" :label="i==0?$t('message.service_ui.describe'):''" :prop="'service_describe.' + i + '.value'">
                              <el-input :placeholder="$t('message.service_ui.please_enter')" v-model="item.value">
                                <template slot="prepend">${item.name}</template>
                              </el-input>
                          </el-form-item>
                      </template>
                      <div class="app-consult-translate-select">
                          <el-select v-model="current_lang" size="small">
                            <el-option v-for="(item,i) in webLang" :key="i" :label="item.name" :value="item.code"></el-option>
                          </el-select>
                          <i class="el-icon-right"></i>
                          <el-select v-model="translate_lang" size="small">
                              <el-option :label="$t('message.service_ui.all_the_others')" value="all"></el-option>
                            <el-option v-for="(item,i) in webLang" :key="i" :label="item.name" :value="item.code"></el-option>
                          </el-select>
                          <el-button type="primary" size="small" :loading="translateStatus" @click="describeTranslate(service.form.service_describe)">${$t('message.service_ui.translate')}</el-button>
                      </div>
                      <el-form-item :label="$t('message.service_ui.default_lang')" prop="default_lang">
                          <el-select v-model="service.form.default_lang" class="app-consult-main-translate" :placeholder="$t('message.service_ui.please_select')">
                            <el-option v-for="item in language" :key="item.value" v-if="item.value!=='auto'" :label="$t('message.translate_language.'+item.label)" :value="item.value"></el-option>
                        </el-select>
                      </el-form-item>
                  </el-form>
            </el-tab-pane>
            <el-tab-pane :label="$t('message.service_ui.system')" name="2">
                <el-form :model="config.form" :rules="configRules" ref="configForm" label-position="top">
                    <el-form-item :label="$t('message.service_ui.default')" prop="service_avatar">
                        <el-radio-group v-model="config.form.service">
                            <el-radio-button :label="1">${$t('message.service_ui.open')}</el-radio-button>
                            <el-radio-button :label="0">${$t('message.service_ui.close')}</el-radio-button>
                        </el-radio-group>
                    </el-form-item>
                    <el-form-item :label="$t('message.service_ui.user_avatar')" prop="user_avatar">
                      <el-upload action="/files" :file-list="config.form.user_avatar" :data="{type:'avatar'}" list-type="picture-card" :headers="headers" :on-success="uploadUserAvatar" :on-remove="delUploadUserAvatar" accept=".jpg,.jpeg,.png,.gif">
                        <i class="el-icon-plus" style="font-size:20px;"></i>
                      </el-upload>
                  </el-form-item>
                  <template v-for="(item, i) in config.form.your_first_reply">
                      <el-form-item class="app-consult-more-lang-list" :label="i==0?$t('message.service_ui.your_first_reply'):''">
                          <el-input :placeholder="$t('message.service_ui.please_enter')" v-model="item.value">
                            <template slot="prepend">${item.name}</template>
                          </el-input>
                      </el-form-item>
                  </template>
                  <div class="app-consult-translate-select">
                      <el-select v-model="current_lang" size="small">
                        <el-option v-for="(item,i) in webLang" :key="i" :label="item.name" :value="item.code"></el-option>
                      </el-select>
                      <i class="el-icon-right"></i>
                      <el-select v-model="translate_lang" size="small">
                          <el-option :label="$t('message.service_ui.all_the_others')" value="all"></el-option>
                        <el-option v-for="(item,i) in webLang" :key="i" :label="item.name" :value="item.code"></el-option>
                      </el-select>
                      <el-button type="primary" size="small" :loading="translateStatus" @click="firstTranslate(config.form.your_first_reply)">${$t('message.service_ui.translate')}</el-button>
                  </div>
                  <template v-for="(item, i) in config.form.offline_prompt">
                      <el-form-item class="app-consult-more-lang-list" :label="i==0?$t('message.service_ui.offline_prompt'):''" :prop="'offline_prompt.' + i + '.value'">
                          <el-input :placeholder="$t('message.service_ui.please_enter')" v-model="item.value">
                            <template slot="prepend">${item.name}</template>
                          </el-input>
                      </el-form-item>
                  </template>
                  <div class="app-consult-translate-select">
                      <el-select v-model="current_lang" size="small">
                        <el-option v-for="(item,i) in webLang" :key="i" :label="item.name" :value="item.code"></el-option>
                      </el-select>
                      <i class="el-icon-right"></i>
                      <el-select v-model="translate_lang" size="small">
                          <el-option :label="$t('message.service_ui.all_the_others')" value="all"></el-option>
                        <el-option v-for="(item,i) in webLang" :key="i" :label="item.name" :value="item.code"></el-option>
                      </el-select>
                      <el-button type="primary" size="small" :loading="translateStatus" @click="offlineTranslate(config.form.offline_prompt)">${$t('message.service_ui.translate')}</el-button>
                  </div>
                <el-form-item :label="$t('message.service_ui.other')" prop="service_avatar">
                    <el-input :placeholder="$t('message.service_ui.url')" class="app-service-form-item" v-model="config.form.facebook">
                        <template slot="prepend">Facebook</template>
                    </el-input>
                    <el-input placeholder="ID" class="app-service-form-item" v-model="config.form.messenger">
                        <template slot="prepend">Messenger</template>
                    </el-input>
                    <el-input :placeholder="$t('message.service_ui.url')" class="app-service-form-item" v-model="config.form.instagram">
                        <template slot="prepend">Instagram</template>
                    </el-input>
                    <el-input :placeholder="$t('message.service_ui.phone')" class="app-service-form-item" v-model="config.form.whatsapp">
                        <template slot="prepend">WhatsApp</template>
                    </el-input>
                    <el-input :placeholder="$t('message.service_ui.url')" class="app-service-form-item" v-model="config.form.line">
                        <template slot="prepend">Line</template>
                    </el-input>
                    <el-input :placeholder="$t('message.service_ui.url')" class="app-service-form-item" v-model="config.form.snapchat">
                        <template slot="prepend">Snapchat</template>
                    </el-input>
                    <el-input :placeholder="$t('message.service_ui.url')" class="app-service-form-item" v-model="config.form.wecom">
                        <template slot="prepend">WeCom</template>
                    </el-input>
                    <el-input :placeholder="$t('message.service_ui.url')" class="app-service-form-item" v-model="config.form.tiktok">
                        <template slot="prepend">Tiktok</template>
                    </el-input>
                    <el-input :placeholder="$t('message.service_ui.url')" class="app-service-form-item" v-model="config.form.kwai">
                        <template slot="prepend">Kwai</template>
                    </el-input>
                    <el-input :placeholder="$t('message.service_ui.url')" class="app-service-form-item" v-model="config.form.vkontakte">
                        <template slot="prepend">Vkontakte</template>
                    </el-input>
                    <el-input :placeholder="$t('message.service_ui.url')" class="app-service-form-item" v-model="config.form.telegram">
                        <template slot="prepend">Telegram</template>
                    </el-input>
                </el-form-item>
              </el-form>
            </el-tab-pane>
            <el-tab-pane :label="$t('message.service_ui.translate')" name="3">
                <el-form :model="translate.form" label-position="top">
                  <el-form-item :label="$t('message.service_ui.youdao_id')" prop="youdao_id">
                      <el-input :placeholder="$t('message.service_ui.please_enter')" v-model="translate.form.youdao_id"></el-input>
                  </el-form-item>
                  <el-form-item :label="$t('message.service_ui.youdao_key')" prop="youdao_key">
                      <el-input :placeholder="$t('message.service_ui.please_enter')" v-model="translate.form.youdao_key"></el-input>
                  </el-form-item>
                </el-form>
            </el-tab-pane>
        </el-tabs>
        <span slot="footer" class="dialog-footer">
            <template v-if="setting==1">
                <el-button size="small" @click="config.status = false">${$t('message.service_ui.cancel')}</el-button>
                <el-button size="small" type="primary" :loading="config.loading" @click="serviceSubmit('serviceForm')">${$t('message.service_ui.confirm')}</el-button>
            </template>
            <template v-if="setting==2">
                <el-button size="small" @click="config.status = false">${$t('message.service_ui.cancel')}</el-button>
                <el-button size="small" type="primary" :loading="config.loading" @click="configSubmit('configForm')">${$t('message.service_ui.confirm')}</el-button>
            </template>
            <template v-if="setting==3">
                <el-button size="small" @click="config.status = false">${$t('message.service_ui.cancel')}</el-button>
                <el-button size="small" type="primary" :loading="translate.loading" @click="translateSubmit">${$t('message.service_ui.confirm')}</el-button>
            </template>
        </span>
    </el-dialog>
    <el-dialog :title="verbal.type=='add'?$t('message.service_ui.add'):$t('message.service_ui.edit')" :close-on-click-modal="false" :visible.sync="verbal.status">
      <el-form :model="verbal.form" :rules="verbalRules" ref="verbal.form" label-position="top">
          <el-form-item :label="$t('message.service_ui.ask')" prop="ask">
              <el-input :placeholder="$t('message.service_ui.please_enter')" v-model="verbal.form.ask"></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.service_ui.answer')" prop="answer">
              <el-input :placeholder="$t('message.service_ui.please_enter')" v-model="verbal.form.answer"></el-input>
          </el-form-item>
          <el-form-item :label="$t('message.service_ui.picture')" prop="picture">
              <el-upload action="/files" :file-list="verbal.form.picture" :data="{type:'picture'}" list-type="picture-card" :headers="headers" :on-success="uploadVerbal" :on-remove="delUploadVerbal" accept=".jpg,.jpeg,.png,.gif">
                <i class="el-icon-plus" style="font-size:20px;"></i>
              </el-upload>
          </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="small" @click="verbal.status = false">${$t('message.service_ui.cancel')}</el-button>
        <el-button size="small" type="primary" :loading="verbal.loading" @click="pushVerbal('verbal.form')">${$t('message.service_ui.confirm')}</el-button>
      </span>
    </el-dialog>
    <!--对话记录-->
    <el-dialog :title="$t('message.service_ui.session_log')"  :close-on-click-modal="false" :visible.sync="history.status">
        <el-container>
          <el-header class="app-consult-table-header">
              <el-input style="width:200px;" v-model="history.load.search" size="small" :placeholder="$t('message.service_ui.nickname')"></el-input>
              <el-button size="small" type="primary" @click="searchHistory">${$t('message.service_ui.search')}</el-button>
          </el-header>
          <el-main class="app-consult-table-main">
              <el-table border :data="history.table" size="small" v-loading="history.loading" height="calc(100vh - 410px)">
                <el-table-column property="avatar" :label="$t('message.service_ui.avatar')">
                    <template slot-scope="scope">
                        <el-avatar :size="36" :src="scope.row.avatar"></el-avatar>
                    </template>
                </el-table-column>
                <el-table-column property="nickname" :label="$t('message.service_ui.nickname')" width="200"></el-table-column>
                <el-table-column property="ip" label="IP" width="160"></el-table-column>
                <el-table-column property="status" :label="$t('message.service_ui.status')" width="160">
                    <template slot-scope="scope">
                        <el-tag type="success" size="small" v-if="scope.row.status">${$t('message.service_ui.show')}</el-tag>
                        <el-tag type="info" size="small" v-else>${$t('message.service_ui.hide')}</el-tag>
                    </template>
                </el-table-column>
                <el-table-column property="operate" :label="$t('message.service_ui.operate')" width="160">
                    <template slot-scope="scope">
                        <el-button @click="historyDetail(scope.row)" type="text">${$t('message.service_ui.detail')}</el-button>
                        <el-button @click="historyDelete(scope.row)" v-if="!scope.row.status" style="color:#ff0000;" type="text">${$t('message.service_ui.del')}</el-button>
                    </template>
                </el-table-column>
              </el-table>
          </el-main>
          <el-footer class="app-consult-table-footer">
              <el-pagination class="app-consult-table-page" :current-page="history.load.page" @size-change="thisSize" @current-change="thisPage" background :page-sizes="[10,100, 200, 300, 500]" :page-size="history.load.count" layout="total, sizes, prev, pager, next, jumper" :total="history.total"></el-pagination>
          </el-footer>
        </el-container>
    </el-dialog>
    <el-drawer :title="history.detail.nickname" :visible.sync="history.detail.status" custom-class="app-consult-table-detail" direction="rtl" @close="closeHistoryDetail">
        <div class="app-consult-loading" v-if="history.detail.load.loading">
            <div class="app-consult-loading__spinner--dots">
                <div class="app-consult-loading__dot"></div>
                <div class="app-consult-loading__dot" style="animation-delay:0.26666666666666666s;"></div>
                <div class="app-consult-loading__dot" style="animation-delay:0.5333333333333333s;"></div>
            </div>
        </div>
      <div class="www-chat-content-box" id="AppRecordConsultMain">
          <template v-for="item in history.detail.list.contentDetail">
              <template v-if="item.type===1">
                  <div class="www-chat-content-width">
                      <div class="www-chat-left-content">
                          <el-avatar class="www-chat-left-avatar" :src="item.avatar"></el-avatar>
                          <!-- 文本 -->
                          <div class="www-chat-left-content-show" v-if="item.role===1">
                              <div class="app-consult-newline">${item.text}</div>
                          </div>
                          <!-- 图片 -->
                          <div class="www-chat-left-content-show www-chat-picture-border" v-if="item.role===2">
                              <el-image style="max-width: 240px;" :src="item.content.url" :preview-src-list="[item.content.url]"></el-image>
                          </div>
                          <!-- 视频 -->
                          <div class="www-chat-left-content-show" v-if="item.role===3">
                              <video style="max-width: 240px;" :src="item.content.url" controls></video>
                          </div>
                          <!-- 商品 -->
                          <div class="www-chat-left-content-show www-chat-picture-border" v-if="item.role===7">
                              <div class="www-chat-shopping-detail">
                                  <van-card :tag="item.content.trait" :currency="item.content.currency" class="www-chat-shopping-card" :price="item.content.price" :title="item.content.name" :thumb="item.content.images[0]" :origin-price="item.content.origin_price">
                                  </van-card>
                              </div>
                          </div>
                          <!-- 订单 -->
                            <div class="www-chat-left-content-show www-chat-picture-border" v-if="item.role===9" style="padding: 0;">
                              <div class="www-chat-shopping-detail">
                                <van-card style="padding: 10px;" :currency="item.content.symbol_left" :num="item.content.num" :price="item.content.price" :title="item.content.name" :thumb="item.content.image">
                                </van-card>
                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.order_number')" :value="item.content.number" :border="false"></van-cell>
                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.addressee')" :value="item.content.shipping_customer_name" :border="false"></van-cell>
                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.phone')" :value="item.content.shipping_telephone" :border="false"></van-cell>
                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.shipping_address')" :value="item.content.shipping_country+item.content.shipping_zone+item.shipping_city+item.content.shipping_address_1+item.content.shipping_address_2" :border="false"></van-cell>
                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.email')" :value="item.content.email" :border="false"></van-cell>
                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.payment')" :value="item.content.payment_method_name" :border="false"></van-cell>
                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.creation_time')" :value="item.content.created_at" :border="false"></van-cell>
                              </div>
                            </div>
                      </div>
                      <span class="www-chat-message-time-left" v-if="!item.translate">
                          <span class="www-chat-message-status" v-if="item.read_time">${ $t('message.service_ui.read') }</span>
                            <span class="www-chat-message-status www-chat-message-status-no" v-else>${ $t('message.service_ui.unread') }</span> ${item.send_time}</span>
                  </div>
                  <div class="www-chat-content-width www-chat-content-width-translate" v-if="item.translate && item.role===1">
                      <div class="www-chat-left-content">
                          <div class="www-chat-left-avatar"></div>
                          <!-- 翻译 -->
                          <div class="www-chat-left-content-show">
                              ${item.translate}
                          </div>
                      </div>
                      <span class="www-chat-message-time-left"><span class="www-chat-message-status" v-if="item.read_time">${ $t('message.service_ui.read') }</span>
                        <span class="www-chat-message-status www-chat-message-status-no" v-else>${ $t('message.service_ui.unread') }</span> ${item.send_time}</span>
                  </div>
              </template>
              <template v-else>
                  <div class="www-chat-content-width">
                      <div class="www-chat-right-content">
                          <!-- 文本 -->
                          <div class="www-chat-right-content-show" v-if="item.role===1">
                              <div class="app-consult-newline">${item.text}</div>
                          </div>
                          <!-- 图片 -->
                          <div class="www-chat-right-content-show www-chat-picture-border" v-if="item.role===2">
                              <el-image style="max-width: 240px;" :src="item.content.url" :preview-src-list="[item.content.url]"></el-image>
                          </div>
                          <!-- 视频 -->
                          <div class="www-chat-right-content-show www-chat-picture-border" v-if="item.role===3">
                              <video style="max-width: 240px;" :src="item.content.url" controls></video>
                          </div>
                          <!-- 商品 -->
                          <div class="www-chat-right-content-show www-chat-picture-border" v-if="item.role===7">
                              <div class="www-chat-shopping-detail">
                                  <van-card :tag="item.content.trait" :currency="item.content.currency" class="www-chat-shopping-card" :price="item.content.price" :title="item.content.name" :thumb="item.content.images[0]" :origin-price="item.content.origin_price">
                                  </van-card>
                              </div>
                          </div>
                          <div class="www-chat-right-content-show www-chat-picture-border" v-if="item.role===9" style="padding: 0;">
                              <div class="www-chat-shopping-detail">
                                <van-card style="padding: 10px;" :currency="item.content.symbol_left" :num="item.content.num" :price="item.content.price" :title="item.content.name" :thumb="item.content.image">
                                </van-card>
                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.order_number')" :value="item.content.number" :border="false"></van-cell>
                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.addressee')" :value="item.content.shipping_customer_name" :border="false"></van-cell>
                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.phone')" :value="item.content.shipping_telephone" :border="false"></van-cell>
                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.shipping_address')" :value="item.content.shipping_country+item.content.shipping_zone+item.shipping_city+item.content.shipping_address_1+item.content.shipping_address_2" :border="false"></van-cell>
                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.email')" :value="item.content.email" :border="false"></van-cell>
                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.payment')" :value="item.content.payment_method_name" :border="false"></van-cell>
                                <van-cell class="www-chat-indent-other" :title="$t('message.service_ui.creation_time')" :value="item.content.created_at" :border="false"></van-cell>
                              </div>
                            </div>
                          <el-avatar class="www-chat-right-avatar" :src="item.avatar"></el-avatar>
                      </div>
                      <span class="www-chat-message-time-right" v-if="!item.translate">
                          <span class="www-chat-message-time-right-more">
                              ${item.send_time} </span>
                          <span class="www-chat-message-status" v-if="item.read_time">${ $t('message.service_ui.read') }</span>
                        <span class="www-chat-message-status www-chat-message-status-no" v-else>${ $t('message.service_ui.unread') }</span>
                      </span>
                  </div>
                  <div class="www-chat-content-width www-chat-content-width-translate" v-if="item.translate && item.role===1">
                      <div class="www-chat-right-content">
                          <!-- 翻译 -->
                          <div class="www-chat-right-content-show">
                              ${item.translate}
                          </div>
                          <div class="www-chat-right-avatar"></div>
                      </div>    
                      <span class="www-chat-message-time-right">
                          <span class="www-chat-message-time-right-more">
                              ${item.send_time} </span>
                          <span class="www-chat-message-status" v-if="item.read_time">${ $t('message.service_ui.read') }</span>
                            <span class="www-chat-message-status www-chat-message-status-no" v-else>${ $t('message.service_ui.unread') }</span>
                        </span>
                  </div>
              </template>
          </template>
      </div>
    </el-drawer>
</div>
<script>
  const i18n = new VueI18n({
    locale: 'en', // 设置当前语言环境为英文
    messages, // 设置语言包
  });
new Vue({
    el: '#AppConsult',
    i18n,
    delimiters: ['${', '}'],
    data () {
        return {
            tabs:'1',
            realTimeMessage:'',
            width:0,
            switchWidth:1,
            menu_search:'',
            verbal_search:'',
            product_search:'',
            order_search:'',
            footprint_search:'',
            verbal:{
                status:false,
                form:{
                    ask:'',
                    answer:'',
                    picture:[]
                },
                title:'',
                type:'add',
                loading:false,
            },
            headers: {
                'X-CSRF-TOKEN': document.querySelector('meta[name="csrf-token"]').getAttribute('content')
            },
            serviceConfig:{
              online:1,
              lively:1,
              sound:1,
              interval:0,
            },
            intervalId:0,
            heartbeatId:0,
            translate:{
                form:{
                    youdao_id:'',
                    youdao_key:'',
                },
                status:false,
            },
            config:{
                form:{
                    user_avatar:[],
                    service:1,
                    your_first_reply:[],
                    offline_prompt:[],
                    facebook:'',
                    messenger:'',
                    instagram:'',
                    whatsapp:'',
                    line:'',
                    snapchat:'',
                    wecom:'',
                },
                status:false,
                loading:false,
            },
            service:{
                status:false,
                form:{
                    service_avatar:'',
                    service_nickname:[],
                    service_describe:[],
                    default_lang:'zh-CHS'
                },
                avatar:[],
                loading:false,
            },
            setting:'1',
            menuSelected:1,
            content:'',
            chatList:{
                menu:[],
                status:true, //点击菜单状态
                loading:false,
                page:2,
                more:true,
                id:0,
                listSortStatus:true, //菜单上下线排序状态
                listNewMessageStatus:true, //菜单新消息排序状态
            },
            language: [{value:'auto',label:'auto'},{value:'ar',label:'ar'},{value:'de',label:'de'},{value:'en',label:'en'},{value:'es',label:'es'},{value:'fr',label:'fr'},{value:'hi',label:'hi'},{value:'id',label:'id'},{value:'it',label:'it'},{value:'ja',label:'ja'},{value:'ko',label:'ko'},{value:'nl',label:'nl'},{value:'pt',label:'pt'},{value:'ru',label:'ru'},{value:'th',label:'th'},{value:'vi',label:'vi'},{value:'zh-CHS',label:'zh-CHS'},{value:'zh-CHT',label:'zh-CHT'},{value:'af',label:'af'},{value:'am',label:'am'},{value:'az',label:'az'},{value:'be',label:'be'},{value:'bg',label:'bg'},{value:'bn',label:'bn'},{value:'bs',label:'bs'},{value:'ca',label:'ca'},{value:'ceb',label:'ceb'},{value:'co',label:'co'},{value:'cs',label:'cs'},{value:'cy',label:'cy'},{value:'da',label:'da'},{value:'el',label:'el'},{value:'eo',label:'eo'},{value:'et',label:'et'},{value:'eu',label:'eu'},{value:'fa',label:'fa'},{value:'fi',label:'fi'},{value:'fj',label:'fj'},{value:'fy',label:'fy'},{value:'ga',label:'ga'},{value:'gd',label:'gd'},{value:'gl',label:'gl'},{value:'gu',label:'gu'},{value:'ha',label:'ha'},{value:'haw',label:'haw'},{value:'he',label:'he'},{value:'hr',label:'hr'},{value:'ht',label:'ht'},{value:'hu',label:'hu'},{value:'hy',label:'hy'},{value:'ig',label:'ig'},{value:'is',label:'is'},{value:'jw',label:'jw'},{value:'ka',label:'ka'},{value:'kk',label:'kk'},{value:'km',label:'km'},{value:'kn',label:'kn'},{value:'ku',label:'ku'},{value:'ky',label:'ky'},{value:'la',label:'la'},{value:'lb',label:'lb'},{value:'lo',label:'lo'},{value:'lt',label:'lt'},{value:'lv',label:'lv'},{value:'mg',label:'mg'},{value:'mi',label:'mi'},{value:'mk',label:'mk'},{value:'ml',label:'ml'},{value:'mn',label:'mn'},{value:'mr',label:'mr'},{value:'ms',label:'ms'},{value:'mt',label:'mt'},{value:'mww',label:'mww'},{value:'my',label:'my'},{value:'ne',label:'ne'},{value:'no',label:'no'},{value:'ny',label:'ny'},{value:'otq',label:'otq'},{value:'pa',label:'pa'},{value:'pl',label:'pl'},{value:'ps',label:'ps'},{value:'ro',label:'ro'},{value:'sd',label:'sd'},{value:'sr-Cyrl',label:'sr-Cyrl'},{value:'sr-Latn',label:'sr-Latn'},{value:'st',label:'st'},{value:'su',label:'su'},{value:'sv',label:'sv'},{value:'sw',label:'sw'},{value:'ta',label:'ta'},{value:'te',label:'te'},{value:'tg',label:'tg'},{value:'tl',label:'tl'},{value:'tlh',label:'tlh'},{value:'to',label:'to'},{value:'tr',label:'tr'},{value:'ty',label:'ty'},{value:'uk',label:'uk'},{value:'ur',label:'ur'},{value:'uz',label:'uz'},{value:'xh',label:'xh'},{value:'yi',label:'yi'},{value:'yo',label:'yo'},{value:'yua',label:'yua'},{value:'yue',label:'yue'},{value:'zu',label:'zu'}],
            verbalTrickList:[],
            productList:[],
            orderList:[],
            footprintList:[],
            webLang:[],
            current_lang:'zh_cn',
            translate_lang:'all',
            uploadUrl:'/admin/file_manager/upload', //
            percentage:100,
            transferList:[],
            translateStatus:false,
            history:{
                table:[],
                load:{
                    search:'',
                    page:1,
                    count:10,
                },
                total:0,
                status:false,
                loading:false,
                detail:{
                    list:{},
                    nickname:'',
                    status:false,
                    loading:false,
                    on:1,
                    load:{
                        page:1,
                        loading:false,
                        more:true,
                        id:0
                    }
                }
                
            },
            info:{
                service_id:'',
                service_nickname:'',
                service_avatar:''
            },
            emoji:new EmojiConvertor(),
            emojiIcon:[
                '😃 ','😄','😉','😆','😅','🤣','😂','🙂',
                '🙃','😘','😚','😜','🤑','🤪','🤫','😒',
                '😬','😈','😪','😷','😟','😨','😰','😡',
                '💀','🙏','💪','👐','👍','✊','✌️','👌'
            ],
            faceVisible:false,
            transferVisible:false,
            cursorPosition:null,
            clickKey:2,
        }
    },
    computed: {  
        serviceRules() {  
          const rules = {  
                service_avatar: [  
                    { required: true, message: this.switchLang('message.service_ui.please_upload'), trigger: 'blur' }  
                ], 
                default_lang: [  
                  { required: true, message: this.switchLang('message.service_ui.please_select'), trigger: 'blur' },  
                ], 
            };  
            rules.service_nickname = this.service.form.service_nickname.map((_, i) => ({  
                'value': [  
                    { required: true, message: this.switchLang('message.service_ui.please_enter'), trigger: 'blur' }  
                ]  
            }));  
            rules.service_describe = this.service.form.service_describe.map((_, i) => ({  
                'value': [  
                    { required: true, message: this.switchLang('message.service_ui.please_enter'), trigger: 'blur' }  
                ]  
            }));  
            return rules; 
        },  
        configRules() {  
            const rules = {  
                user_avatar: [  
                    { required: true, message: this.switchLang('message.service_ui.please_upload'), trigger: 'blur' }  
                ], 
            };  
            rules.offline_prompt = this.config.form.offline_prompt.map((_, i) => ({  
                'value': [  
                    { required: true, message: this.switchLang('message.service_ui.please_enter'), trigger: 'blur' }  
                ]  
            }));  
            return rules;   
        },  
        verbalRules() {  
          return {  
            ask: [
                { required: true, message: this.switchLang('message.service_ui.please_enter'), trigger: 'blur' },
              ],
              answer: [
                { required: true, message: this.switchLang('message.service_ui.please_enter'), trigger: 'blur' },
              ],
          };  
        },  
    },  
    methods: {
        initWindow(){
            let windowWidth= document.body.clientWidth;
            this.width=windowWidth
            window.addEventListener('resize',()=>{
                let windowsWidth= document.body.clientWidth;
                this.width=windowsWidth
            },{passive:true})
        },
        returnMenu(){
            this.switchWidth = 1
        },
        getVerbal(){
            this.switchWidth = 3
        },
        returnChat(){
            this.switchWidth = 2
        },
        clickMenu(i,e,c=0){
            if(this.chatList.status){
                this.chatList.status=false
                if(c===1){
                    this.switchWidth=2
                }
                this.menuSelected = i
                this.content=' '
                let _this=this
                _this.chatList.page=2
                _this.chatList.more=true
                setTimeout(function(){ _this.content='' }, 200);
                // 载入订单和足迹
                axios.get('/admin/consult_dialogue?detail='+e.id).then((res) => {
                    _this.chatList.menu.forEach((element) => {
                        if(element.content_id===e.content_id){
                            element.new=0
                            element.contentDetail = res.data.data.contentDetail
                        }
                    })
                    _this.readMessage(e.user_id)
                    setTimeout(function(){
                        _this.chatHeight()
                    }, 100);
                }).catch(() => {
                })
                _this.initOrder(e.user_id)
                _this.initFootprint(e.user_id)
                this.chatList.status=true
            }
        },
        initMenuContentPage(){
            let _this = this
            const drawerBody = document.querySelector('.www-chat-box');  
            drawerBody.addEventListener('scroll', function() {  
                // 检查是否滚动到顶部  
                if (drawerBody.scrollTop === 0) {  
                    // 触发加载更多内容的函数  
                    if(_this.chatList.more){
                        //有更多
                        _this.chatList.loading=true
                        axios.request({method:'get',url:'/admin/consult_dialogue?id='+_this.chatList.menu[_this.menuSelected-1].id+'&page='+_this.chatList.page}).then((res) => {
                            _this.chatList.menu[_this.menuSelected-1]['contentDetail'].unshift(...res.data.data.contentDetail)
                            if(res.data.data.contentDetail.length<30){
                                // 已经最后一页
                                _this.chatList.more=false
                            }else{
                                _this.chatList.page=_this.chatList.page+1
                            } 
                            _this.chatList.loading=false
                          }).catch((e) => {
                            _this.chatList.loading=false
                          })
                    }
                }
            });  
        },
        switchLang(e){
            return this.$t(e)
        },
        // 上传图片
        uploadUserAvatar(file){
            this.config.form.user_avatar.push({name:file.data.value,url:file.data.value})
        },
        delUploadUserAvatar(file){
            this.config.form.user_avatar = this.config.form.user_avatar.filter(item => item.name !== file.name);
        },
        // 客服头像上传
        uploadServiceAvatar(file){
            this.service.form.service_avatar=file.data.value
            let elements = document.querySelectorAll('.app-service-avatar-list .el-upload-list');
            elements.forEach(function(element) {
              element.textContent = ''; 
            });
        },
        configBox(){
            let _this = this
            _this.config.status=true
            axios.get('/admin/consult_service').then((response) => {
                _this.service.form=response.data.data
                _this.service.form.service_nickname=_this.checkCodes(_this.webLang,response.data.data.service_nickname)
                _this.service.form.service_describe=_this.checkCodes(_this.webLang,response.data.data.service_describe)
            })
            axios.get('/admin/consult_setting').then((res) => {
                _this.config.form=res.data.data
                _this.translate.form=res.data.data
                _this.config.form.your_first_reply=_this.checkCodes(_this.webLang,res.data.data.your_first_reply)
                _this.config.form.offline_prompt=_this.checkCodes(_this.webLang,res.data.data.offline_prompt)
            })
        },
        // 函数来检查并处理数据  
        checkCodes(arrayA, arrayB) {  
            let newArray=[]
            arrayA.forEach(itemA => {  
                const existingItemB = arrayB.find(itemB => itemB.code === itemA.code);  
                  
                if (existingItemB) {  
                    newArray.push({code:existingItemB.code,name:existingItemB.name,value:existingItemB.value?existingItemB.value:''});
                } else {  
                    newArray.push({code:itemA.code,name:itemA.name,value:itemA.value?itemA.value:''});
                }  
            });  
          return newArray; 
             
        },
        serviceSubmit(e){
            let _this = this
            this.$refs[e].validate((valid) => {
                if (valid) {
                    axios.request({method:'put',url:'/admin/consult_service',data:_this.service.form}).then((res) => {
                        _this.service.loading = false
                        _this.config.status = false
                        _this.$message({
                          message: res.data.message,
                          type: 'success'
                        });
                      }).catch(() => {
                          
                      })
                } else {
                    return false;
                }
            });
        },
        configSubmit(e){
            let _this = this
            this.$refs[e].validate((valid) => {
                if (valid) {
                    _this.config.form.type='c'
                    axios.request({method:'put',url:'/admin/consult_setting',data:_this.config.form}).then((res) => {
                        _this.config.loading = false
                        _this.config.status = false
                        _this.$message({
                          message: res.data.message,
                          type: 'success'
                        });
                      }).catch(() => {
                          
                      })
                } else {
                    return false;
                }
            });
        },
        translateSubmit(e){
            let _this = this
            _this.translate.form.type='t'
            axios.request({method:'put',url:'/admin/consult_setting',data:_this.translate.form}).then((res) => {
                _this.translate.loading = false
                _this.config.status = false
                _this.$message({
                  message: res.data.message,
                  type: 'success'
                });
              }).catch(() => {
                  
              })
        },
        editVerbal(e){
              if(typeof e == 'string'){
                this.verbal.form.ask = ''
                this.verbal.form.answer = ''
                this.verbal.form.picture = []
                this.verbal.type = 'add'
              }else{
                this.verbal.type = 'save'
                axios.get('/admin/consult_verbal?id='+e.id).then((response) => {
                    this.verbal.form=response.data.data
                })
              }
            this.verbal.status=true
        },
        pushVerbal(e){
            let _this = this
            this.$refs[e].validate((valid) => {
                if (valid) {
                    axios.request({method:_this.verbal.type=='add'?'post':'put',url:'/admin/consult_verbal',data:_this.verbal.form}).then((res) => {
                        _this.verbal.loading = false
                        _this.verbal.status = false
                        _this.initVerbalTrick()
                        _this.$message({
                          message: res.data.message,
                          type: 'success'
                        });
                      }).catch(() => {
                          
                      })
                } else {
                    return false;
                }
            });
        },
        delVerbal(e){
            vant.Dialog.confirm({
                confirmButtonText:this.$t('message.service_ui.confirm'),
                cancelButtonText:this.$t('message.service_ui.cancel'),
              title: this.$t('message.service_ui.warning'),
              message: this.$t('message.service_ui.confirmDelete'),
            })
              .then(() => {
                let _this = this
                axios.request({method:'delete',url:'/admin/consult_verbal?id='+e.id}).then((res) => {
                    _this.$message({
                      message: res.data.message,
                      type: 'success'
                    });
                    _this.initVerbalTrick()
                  }).catch(() => {
                      
                  })
              })
              .catch(() => {
                // on cancel
              });
        },
        initVerbalTrick(){
            axios.get('/admin/consult_verbal').then((response) => {
                this.verbalTrickList=response.data.data
            })
        },
        refreshVerbal(){
            this.verbalTrickList=[]
            this.initVerbalTrick()
        },
        // 初始化商品数据
        initProduct(){
            axios.get('/admin/consult_goods').then((response) => {
                this.productList=response.data.data
            })
        },
        refreshCommodity(){
            this.productList=[]
            this.initProduct()
        },
        initOrder(user_id){
            axios.get('/admin/consult_order?user_id='+user_id).then((response) => {
                this.orderList=response.data.data
            })
        },
        refreshOrder(){
            this.orderList=[]
            this.initOrder(this.chatList.menu[this.menuSelected-1].user_id)
        },
        initFootprint(user_id){
            axios.get('/admin/consult_footprint?user_id='+user_id).then((response) => {
                this.footprintList=response.data.data
            })
        },
        refreshFootprint(){
            this.footprintList=[]
            this.initFootprint(this.chatList.menu[this.menuSelected-1].user_id)
        },
        pushNews(e){
            let _this = this
            if(e.picture.length===0){
                let a={type:2,role:1,guid:this.randomNumber(),user_id:this.chatList.menu[this.menuSelected-1].user_id,text:e.answer,status:1,read_time:'',send_time:this.timeDate(),nickname:this.info.service_nickname,avatar:this.info.service_avatar,content:{url:'',name:'',cover:''}}
                _this.postMessage(a)
                _this.addData(a)
            }else{
                // 处理图片--待处理
                e.picture.forEach((element) => {
                    let a={type:2,role:2,guid:this.randomNumber(),user_id:this.chatList.menu[this.menuSelected-1].user_id,text:'',status:1,read_time:'',send_time:this.timeDate(),nickname:this.info.service_nickname,avatar:this.info.service_avatar,content:{url:element.url,name:'',cover:''}}
                    _this.postMessage(a)
                    _this.addData(a)
                })
                let b={type:2,role:1,guid:this.randomNumber(),user_id:this.chatList.menu[this.menuSelected-1].user_id,text:e.answer,status:1,read_time:'',send_time:this.timeDate(),nickname:this.info.service_nickname,avatar:this.info.service_avatar,content:{url:'',name:'',cover:''}}
                _this.postMessage(b)
                _this.addData(b)
            }
            _this.switchWidth = 2
        },
        pushProduct(e){
            let _this=this
            // 推送前匹配语言再发送
            axios.get('/admin/consult_goods?product_id='+e.id+'&user_lang='+_this.chatList.menu[_this.menuSelected-1].user_lang+'&user_language	='+_this.chatList.menu[_this.menuSelected-1].user_language	).then((response) => {
                if(response.data.data){
                    _this.pushData(2,7,response.data.data)
                    _this.switchWidth = 2
                }else{
                  _this.$message({
                      message: _this.$t('message.service_ui.no_product_lang'),
                      type: 'warning'
                    });
                }
            })
        },
        pushOrder(e){
            this.pushData(2,9,e)
            this.switchWidth = 2
        },
        // 上传图片
        uploadVerbal(file){
            this.verbal.form.picture.push({name:file.data.value,url:file.data.value})
        },
        delUploadVerbal(file){
            this.verbal.form.picture = this.verbal.form.picture.filter(item => item.name !== file.name);
        },
        // 上传文件
        uploadFile(file){
            let _this=this
            if (typeof file.url !== 'undefined') {
                if(file.url.includes('mp4')){
                    _this.pushData(2,3,file)
                }else{
                    _this.pushData(2,2,file)
                }
            }else{
                _this.$message.error($t('message.service_ui.fail_to_upload'));
            }
            setTimeout(function(){
                _this.chatHeight()
            }, 200);
        },
        pushData(type,role,data){
            let _this=this
            switch (role) {
                case 2:
                    let a={type:type,role:role,guid:this.randomNumber(),user_id:this.chatList.menu[this.menuSelected-1].user_id,text:'',status:1,read_time:'',send_time:this.timeDate(),nickname:this.info.service_nickname,avatar:this.info.service_avatar,content:{url:data.url,name:data.name,cover:''}}
                    _this.postMessage(a)
                    _this.addData(a)
                break;
                case 3:
                    let b={type:type,role:role,guid:this.randomNumber(),user_id:this.chatList.menu[this.menuSelected-1].user_id,text:'',status:1,read_time:'',send_time:this.timeDate(),nickname:this.info.service_nickname,avatar:this.info.service_avatar,content:{url:data.url,name:data.name,cover:''}}
                    _this.postMessage(b)
                    _this.addData(b)
                break;
                case 4:
                    let c={type:type,role:role,guid:this.randomNumber(),user_id:this.chatList.menu[this.menuSelected-1].user_id,text:'',status:1,read_time:'',send_time:this.timeDate(),nickname:this.info.service_nickname,avatar:this.info.service_avatar,content:{url:data.url,name:data.name,cover:''}}
                    _this.postMessage(c)
                    _this.addData(c)
                break;
                case 7:
                    let d={type:type,role:role,guid:this.randomNumber(),user_id:this.chatList.menu[this.menuSelected-1].user_id,text:'',status:1,read_time:'',send_time:this.timeDate(),nickname:this.info.service_nickname,avatar:this.info.service_avatar,content:data}
                    _this.postMessage(d)
                    _this.addData(d)
                break;
                case 9:
                    let e={type:type,role:role,guid:this.randomNumber(),user_id:this.chatList.menu[this.menuSelected-1].user_id,text:'',status:1,read_time:'',send_time:this.timeDate(),nickname:this.info.service_nickname,avatar:this.info.service_avatar,content:data}
                    _this.postMessage(e)
                    _this.addData(e)
                break;
                default:
                break;
            }
        },
        uploadProgress(e,f,l){
            this.percentage=Math.floor(e.percent)
        },
        // 转接
        transferButton(){
            let _this = this
            if(_this.transferVisible){
                _this.transferVisible=false
            }else{
                axios.get('/admin/consult_transfer').then((response) => {
                    _this.transferList = response.data.data
                    _this.transferVisible=true
                })
            }
        },
        transferService(e){
            let _this = this
            _this.transferVisible=false
            let old_data=_this.chatList.menu[_this.menuSelected-1]
            delete old_data.contentDetail;
            axios.request({method:'put',url:'/admin/consult_transfer',data:{new_service:e,old_service:old_data}}).then((res) => {
                // 转接成功移除当前用户
                _this.chatList.menu = _this.chatList.menu.filter(obj => obj.user_id !== _this.chatList.menu[_this.menuSelected-1].user_id)
                if(_this.chatList.menu.length>0){
                    _this.clickMenu(1,_this.chatList.menu[0])
                }else{
                    _this.chatList.menu=[]
                    _this.menuSelected=1
                }
                _this.switchWidth = 1
                _this.$message({
                  message: res.data.message,
                  type: 'success'
                });
              }).catch((err) => {
                  _this.$message({
                      message: err.response.data.message,
                      type: 'error'
                    });
              })
        },
        initDialogue(){
            let _this = this
            axios.get('/admin/consult_dialogue').then((response) => {
                response.data.data.forEach((element) => {
                    if(element.content){
                        element.text=element.content.text==''?_this.messageType(element.content.role):element.content.text
                        element.send_time=element.content.send_time
                    }else{
                        element.text=''
                        element.send_time=''
                    }
                });
                _this.chatList.menu=response.data.data
                // 载入订单和足迹
                setTimeout(function(){
                    if(_this.chatList.menu.length>0){
                        _this.initOrder(_this.chatList.menu[_this.menuSelected-1].user_id)
                        _this.initFootprint(_this.chatList.menu[_this.menuSelected-1].user_id)
                    }
                }, 800);
                _this.listSort()
                _this.chatHeight()
            })
        },
        formatPast(param, format = 'YYYY-mm-dd'){
        	if(!param){
        		return '';
        	}
        	// 传入格式处理、存储转换值
        	let t, s;
        	// 获取js 时间戳
        	let time = new Date().getTime();
        	// 是否是对象
        	typeof param === 'string' || 'object' ? (t = new Date(param).getTime()) : (t = param);
        	// 当前时间戳 - 传入时间戳
        	time = Number.parseInt(`${time - t}`);
        	if (time < 10000) {
        		// 10秒内
        		return this.$t('message.service_ui.just');
        	} else if (time < 60000 && time >= 10000) {
        		// 超过10秒少于1分钟内
        		s = Math.floor(time / 1000);
        		return `${s}`+this.$t('message.service_ui.seconds_ago');
        	} else if (time < 3600000 && time >= 60000) {
        		// 超过1分钟少于1小时
        		s = Math.floor(time / 60000);
        		return `${s}`+this.$t('message.service_ui.minutes_ago');
        	} else if (time < 86400000 && time >= 3600000) {
        		// 超过1小时少于24小时
        		s = Math.floor(time / 3600000);
        		return `${s}`+this.$t('message.service_ui.hour_ago');
        	} else if (time < 259200000 && time >= 86400000) {
        		// 超过1天少于3天内
        		s = Math.floor(time / 86400000);
        		return `${s}`+(this.$t('message.service_ui.day_ago'));
        	} else {
        		// 超过3天
        		let date = typeof param === 'string' || 'object' ? new Date(param) : param;
        		let this_data = new Date(date);
        		return this_data.toISOString().split('T')[0];
        	}
        },
        messageType(e){
            switch (e) {
                case 2:
                    return '['+this.$t('message.service_ui.picture')+']'
                break;
                case 3:
                    return '['+this.$t('message.service_ui.video')+']'
                break;
                case 5:
                    return '['+this.$t('message.service_ui.file')+']'
                break;
                case 7:
                    return '['+this.$t('message.service_ui.commodity')+']'
                break;
                case 9:
                    return '['+this.$t('message.service_ui.order')+']'
                break;
                default:
                    return '['+this.$t('message.service_ui.unknown')+']'
                break;
            }
        },
        previewImage(e){
        	let url = []
        	e.forEach((element) => {
        		url.push(element.url)
        	});
        	return url
        },
        // 初始化网站所有安装的语言
        initWebLang(){
            let _this = this
            axios.get('/admin/consult_lang').then((response) => {
                _this.webLang=response.data.data
            })
        },
        languageTransformation(e,s,data){
            axios.request({method:'post',url:'/admin/consult_batch_translate',data:{current_lang:e,translate_lang:s,text:data}}).then((res) => {
                _this.$message({
                  message: res.data.message,
                  type: 'success'
                });
              }).catch(() => {
                  
              })
        },
        pushMessage(){
            if(this.content.trim().length>0){
                let a={type:2,role:1,guid:this.randomNumber(),user_id:this.chatList.menu[this.menuSelected-1].user_id,text:this.content,status:1,read_time:'',send_time:this.timeDate(),nickname:this.info.service_nickname,avatar:this.info.service_avatar,translate:'',content:{url:'',name:'',cover:''}}
              this.postMessage(a)
                this.addData(a)
                this.content = ''
            }
        },
        postMessage(e){
            let _this=this
            // let data=JSON.stringify(e)
                axios.request({method:'post',url:'/admin/consult_dialogue',data:e}).then((res) => {
                // 翻译消息有返回
                if(typeof res.data.data.translate !== undefined){
                    let lastElement = _this.chatList.menu[_this.menuSelected-1].contentDetail[_this.chatList.menu[_this.menuSelected-1].contentDetail.length - 1];
                    if(res.data.data.user_id===lastElement.user_id){
                        lastElement.translate=res.data.data.translate
                    }
                    _this.chatHeight()
                }
              }).catch(() => {
                  
              })
            // 提交后端数据
        },
        timeDate(){
        	let date = new Date();
        	let y = date.getFullYear()+'-'
        	let m = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1) : date.getMonth()+1)+'-'
        	let d = (date.getDate() < 10 ? '0'+(date.getDate()) : date.getDate())+' '
        	let h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours()) +':'; //获取系统时，
        	let i = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) +':'; //分
        	let s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds(); //秒
        	let time=y+m+d+h+i+s
        	return time
        },
        addData(e){
            this.chatList.menu[this.menuSelected-1].contentDetail.push(e)
            // 把最新数据更新到菜单
            this.chatList.menu[this.menuSelected-1].text = e.text==''?this.messageType(e.role):e.text
            this.chatList.menu[this.menuSelected-1].send_time = e.send_time
            this.chatHeight()
        },
        chatRecordHeight(){
            setTimeout(function(){
                let element = document.querySelector('.app-consult-table-detail .el-drawer__body');
                if (element) {
                    element.scrollTop = element.scrollHeight - element.clientHeight;
                }
            }, 200);
        },
        chatHeight(){
            setTimeout(function(){
                let element = document.getElementById('AppConsultMain');
                if (element) {
                    element.scrollTop = element.scrollHeight - element.clientHeight;
                }
            }, 200);
        },
        inputMonitor(){
            this.chatHeight()
        },
        // 撤回消息
        revocationButton(e){
            let _e=e
            let _this=this
            vant.Dialog.confirm({
                confirmButtonText:_this.$t('message.service_ui.confirm'),
                cancelButtonText:_this.$t('message.service_ui.cancel'),
              title: _this.$t('message.service_ui.revocation'),
              message: _e.text,
            })
              .then(() => {
                  axios.request({method:'patch',url:'/admin/consult_dialogue',data:_e}).then((res) => {
                        _this.$message({
                          message: res.data.message,
                          type: 'success'
                        });
                        // 移除本地数据
                        _this.chatList.menu[_this.menuSelected-1].contentDetail.forEach((element,i) => {
                    		if(element.guid==_e.guid){
                    		    if(_this.chatList.menu[_this.menuSelected-1].contentDetail.length==i+1 && _this.chatList.menu[_this.menuSelected-1].contentDetail.length>2){
                    		      // 最后一条移除菜单栏内容回退上一步数据
                    		      _this.chatList.menu[_this.menuSelected-1].text=element.text==''?_this.messageType(element.role):element.text
                    		      _this.chatList.menu[_this.menuSelected-1].send_time=element.send_time
                    		    }else{
                    		        _this.chatList.menu[_this.menuSelected-1].text=''
                    		        _this.chatList.menu[_this.menuSelected-1].send_time=''
                    		    }
                    		    _this.chatList.menu[_this.menuSelected-1].contentDetail.splice(i, 1);
                    		    
                    		}
                    	});
                    }).catch(() => {
                    })
              })
              .catch(() => {
                // on cancel
              });
        },
        // 切换翻译
        switchTranslate(e){
            let _this= this
            axios.request({method:'post',url:'/admin/consult_switch_translate',data:e}).then((res) => {
                _this.$message({
                  message: res.data.message,
                  type: 'success'
                });
              }).catch(() => {
                  
              })
        },
        nicknameTranslate(e){
            let _this= this
            _this.translateStatus = true
            if(_this.current_lang==_this.translate_lang){
                _this.$message({
                  message: _this.$t('message.service_ui.no_translate'),
                  type: 'error'
                });
                _this.translateStatus = false
                return false
            }
            let d=0
            let text=''
            e.forEach((element) => {
              if(element.code==_this.current_lang){
                  text=element.value
                if(element.value==''){
                    d=1
                    return false
                }
              }
            })
            if(d){
                _this.$message({
                  message: _this.$t('message.service_ui.input_translate'),
                  type: 'error'
                });
                _this.translateStatus = false
                return false
            }
            axios.request({method:'post',url:'/admin/consult_batch_translate',data:{current_lang:_this.current_lang,translate_lang:_this.translate_lang,text:text,data:e}}).then((res) => {
                _this.$message({
                  message: res.data.message,
                  type: 'success'
                });
                _this.service.form.service_nickname=res.data.data
                _this.translateStatus = false
              }).catch((e) => {
                  _this.$message({
                      message: e.response.data.message,
                      type: 'error'
                    });
                _this.service.form.service_nickname=e.response.data.data
                _this.translateStatus = false
              })
        },
        describeTranslate(e){
            let _this= this
            _this.translateStatus = true
            if(_this.current_lang==_this.translate_lang){
                _this.$message({
                  message: _this.$t('message.service_ui.no_translate'),
                  type: 'error'
                });
                _this.translateStatus = false
                return false
            }
            let d=0
            let text=''
            e.forEach((element) => {
              if(element.code==_this.current_lang){
                  text=element.value
                if(element.value==''){
                    d=1
                    return false
                }
              }
            })
            if(d){
                _this.$message({
                  message: _this.$t('message.service_ui.input_translate'),
                  type: 'error'
                });
                _this.translateStatus = false
                return false
            }
            axios.request({method:'post',url:'/admin/consult_batch_translate',data:{current_lang:_this.current_lang,translate_lang:_this.translate_lang,text:text,data:e}}).then((res) => {
                _this.$message({
                  message: res.data.message,
                  type: 'success'
                });
                _this.service.form.service_describe=res.data.data
                _this.translateStatus = false
              }).catch((e) => {
                  _this.$message({
                      message: e.response.data.message,
                      type: 'error'
                    });
                _this.service.form.service_describe=e.response.data.data
                _this.translateStatus = false
              })
        },
        firstTranslate(e){
            let _this= this
            _this.translateStatus = true
            if(_this.current_lang==_this.translate_lang){
                _this.$message({
                  message: _this.$t('message.service_ui.no_translate'),
                  type: 'error'
                });
                _this.translateStatus = false
                return false
            }
            let d=0
            let text=''
            e.forEach((element) => {
              if(element.code==_this.current_lang){
                  text=element.value
                if(element.value==''){
                    d=1
                    return false
                }
              }
            })
            if(d){
                _this.$message({
                  message: _this.$t('message.service_ui.input_translate'),
                  type: 'error'
                });
                _this.translateStatus = false
                return false
            }
            axios.request({method:'post',url:'/admin/consult_batch_translate',data:{current_lang:_this.current_lang,translate_lang:_this.translate_lang,text:text,data:e}}).then((res) => {
                _this.$message({
                  message: res.data.message,
                  type: 'success'
                });
                _this.config.form.your_first_reply=res.data.data
                _this.translateStatus = false
              }).catch((e) => {
                  _this.$message({
                      message: e.response.data.message,
                      type: 'error'
                    });
                _this.config.form.your_first_reply=e.response.data.data
                _this.translateStatus = false
              })
        },
        offlineTranslate(e){
            let _this= this
            _this.translateStatus = true
            if(_this.current_lang==_this.translate_lang){
                _this.$message({
                  message: _this.$t('message.service_ui.no_translate'),
                  type: 'error'
                });
                _this.translateStatus = false
                return false
            }
            let d=0
            let text=''
            e.forEach((element) => {
              if(element.code==_this.current_lang){
                  text=element.value
                if(element.value==''){
                    d=1
                    return false
                }
              }
            })
            if(d){
                _this.$message({
                  message: _this.$t('message.service_ui.input_translate'),
                  type: 'error'
                });
                _this.translateStatus = false
                return false
            }
            axios.request({method:'post',url:'/admin/consult_batch_translate',data:{current_lang:_this.current_lang,translate_lang:_this.translate_lang,text:text,data:e}}).then((res) => {
                _this.$message({
                  message: res.data.message,
                  type: 'success'
                });
                _this.config.form.offline_prompt=res.data.data
                _this.translateStatus = false
              }).catch((e) => {
                  _this.$message({
                      message: e.response.data.message,
                      type: 'error'
                    });
                _this.config.form.offline_prompt=e.response.data.data
                _this.translateStatus = false
              })
        },
        switchLink(e){
            Cookies.set('consult_line_status',e?'true_status':'false_status')
            this.serviceConfig.lively=e
            if(e){
                // this.initWebsocket()
                window.location.reload()
            }else{
                this.closeWebsocket()
            }
        },
        switchSound(e){
            Cookies.set('consult_line_sound',e?'true_status':'false_status')
            this.serviceConfig.sound=e
        },
        initWebsocket(){
            let _this = this
            let domain = window.location.hostname
            let protocol = window.location.protocol === 'https:' ? 'wss://' : 'ws://'; 
            _this.ws = new WebSocket(protocol+domain+'/consult_socket');
            if(_this.ws.readyState==WebSocket.OPEN){
                // 已连接忽略
            }else{
                 _this.ws.onopen = function() {
                    _this.ws.send(JSON.stringify({role:0,text:'ping'})); //连接成功
                }
                _this.ws.onmessage = function(es){
                    // json数据转换成js对象
                    let e = eval("("+es.data+")");
                    if(e.client_id){
                        axios.request({method:'put',url:'/admin/consult_dialogue',data:e}).then((res) => {
                            // 绑定成功
                        }).catch(() => {
                            _this.$message({
                              message: res.data.message,
                              type: 'error'
                            });
                        })
                    }else{
                        if(e.role>0){
                            if(e.role===1){
                                _this.content = ''
                            }
                            // 用户上线
                            if(e.role===100){
                                // 判断新数据是否在数组中存在只改在线状态及消息
                                if(_this.chatList.menu.length>0){
                                    let getStatus=0
                                    _this.chatList.menu.forEach((element) => {
                                        if(element.user_id===e.data.user_id){
                                            // 更改已经存在的状态
                                            getStatus=1
                                            element.state=1
                                            // 最新消息赋值
                                            element.user_lang = e.data.user_lang
                                            element.user_language= e.data.user_language
                                            let lengthData=e.data.length
                                            if(lengthData>0){
                                                element.text = e.data.contentDetail[lengthData-1].text==''?_this.messageType(e.role):e.data.contentDetail[lengthData-1].text
                                                element.send_time = e.data.contentDetail[lengthData-1].send_time
                                            }
                                        }
                                    })
                                    if(getStatus){
                                        
                                    }else{
                                        _this.chatList.menu.unshift(e.data);
                                        // 默认键值加一
                                        _this.menuSelected=_this.menuSelected+1
                                        if(e.data.contentDetail.length>0){
                                            let lengthData=e.data.contentDetail.length
                                            _this.chatList.menu[0].text=e.data.contentDetail[lengthData-1].text==''?_this.messageType(e.role):e.data.contentDetail[lengthData-1].text
                                            _this.chatList.menu[0].send_time = e.data.contentDetail[lengthData-1].send_time
                                        }
                                    }
                                }else{
                                    _this.chatList.menu.push(e.data);
                                    if(e.data.contentDetail.length>0){
                                        let lengthData=e.data.contentDetail.length
                                        _this.chatList.menu[0].text=e.data.contentDetail[lengthData-1].text==''?_this.messageType(e.role):e.data.contentDetail[lengthData-1].text
                                        _this.chatList.menu[0].send_time = e.data.contentDetail[lengthData-1].send_time
                                    }
                                }
                                _this.listSort()
                            }else if(e.role==101){
                                // 用户已读消息
                                if(_this.chatList.menu.length>0){
                                    if(_this.chatList.menu[_this.menuSelected-1].user_id==e.user_id){
                                        // 当前显示是此用户则更新数据为已读
                                        _this.chatList.menu[_this.menuSelected-1].contentDetail.forEach((element) => {
                                            if(element.read_time==''){
                                                element.read_time=_this.timeDate()
                                            }
                                        });
                                    }
                                }
                            // 接收转接用户
                            }else if(e.role==102){
                                // 判断新数据是否在数组中存在只改在线状态及消息
                                if(_this.chatList.menu.length>0){
                                    let getStatus=0
                                    _this.chatList.menu.forEach((element) => {
                                        if(element.user_id===e.data.user_id){
                                            // 更改已经存在的状态
                                            getStatus=1
                                            element.state=1
                                            // 最新消息赋值
                                            let lengthData=e.data.length
                                            if(lengthData>0){
                                                element.text = e.data.contentDetail[lengthData-1].text==''?_this.messageType(e.role):e.data.contentDetail[lengthData-1].text
                                                element.send_time = e.data.contentDetail[lengthData-1].send_time
                                            }
                                        }
                                    })
                                    if(getStatus){
                                        
                                    }else{
                                        _this.chatList.menu.unshift(e.data);
                                        if(e.data.contentDetail.length>0){
                                            let lengthData=e.data.contentDetail.length
                                            _this.chatList.menu[0].text=e.data.contentDetail[lengthData-1].text==''?_this.messageType(e.role):e.data.contentDetail[lengthData-1].text
                                            _this.chatList.menu[0].send_time = e.data.contentDetail[lengthData-1].send_time
                                        }
                                        // 默认键值加一
                                        _this.menuSelected=_this.menuSelected+1
                                    }
                                    _this.$message({
                                      message: _this.$t('message.service_ui.received_forwarding')+'：'+e.data.nickname,
                                      type: 'warning'
                                    });
                                }else{
                                    _this.chatList.menu.push(e.data);
                                    if(e.data.contentDetail.length>0){
                                        let lengthData=e.data.contentDetail.length
                                        _this.chatList.menu[0].text=e.data.contentDetail[lengthData-1].text==''?_this.messageType(e.role):e.data.contentDetail[lengthData-1].text
                                        _this.chatList.menu[0].send_time = e.data.contentDetail[lengthData-1].send_time
                                    }
                                }
                                _this.listSort()
                            }else if(e.role==103){
                                /*用户断线重连*/
                                _this.chatList.menu.forEach((element) => {
                                    if(element.user_id===e.user_id){
                                        // 更改已经存在的状态
                                        element.state=1
                                    }
                                })
                            }else if(e.role==104){
                                /*合并移除*/
                                for (let i = 0; i < _this.chatList.menu.length; i++) {  
                                    if(_this.chatList.menu[i].user_id===e.data.user_id){
                                        if( _this.chatList.menu.length>1){
                                            _this.chatList.menu.splice(i, 1); 
                                        }else{
                                            _this.chatList.menu=[]
                                        }
                                        break;
                                    }  
                                }  
                                _this.$message({
                                  message: e.data.nickname+' '+_this.$t('message.service_ui.merged_message'),
                                  type: 'warning'
                                });
                            }else if(e.role==99){
                                // 当前对话对象跟预览一致才显示
                                if(_this.chatList.menu[_this.menuSelected-1].user_id==e.user_id){
                                    _this.realTimeMessage=e.text
                                }
                            }else{
                                _this.chatList.menu.forEach((element) => {
                                    if(e.user_id==element.user_id){
                                        element.state=1
                                        if(element.user_id==_this.chatList.menu[_this.menuSelected-1].user_id && e.role!=99){
                                            let a={type:e.type,role:e.role,guid:e.guid,user_id:e.user_id,text:e.text,translate:e.translate,read_time:e.read_time,send_time:e.send_time,nickname:e.nickname,avatar:e.avatar,content:e.content}
                                            // 新消息
                                            _this.addData(a)
                                        }
                                        if(e.role!=99){
                                            // 追加数据到菜单显示
                                            element.text = e.text==''?_this.messageType(e.role):e.text
                                            element.send_time = e.send_time
                                            if(_this.chatList.menu[_this.menuSelected-1].user_id!=e.user_id){
                                                element.new=element.new+1
                                            }
                                            if(_this.chatList.menu[_this.menuSelected-1].user_id==e.user_id){
                                                _this.readMessage(e.user_id)
                                            }
                                            // 排序
                                            _this.newMessageSort(e)
                                        }else{
                                            // 当前对话对象跟预览一致才显示
                                            if(_this.chatList.menu[_this.menuSelected-1].user_id==e.user_id){
                                                _this.realTimeMessage=e.text
                                            }
                                        }
                                    }
                                })
                                if(_this.serviceConfig.sound && _this.serviceConfig.interval===0){
                                    _this.startCountdown()
                                    if(_this.chatList.menu[_this.menuSelected-1].user_id===e.user_id){
                                        let noticePlayer = document.getElementById("audioNotice")
                                        noticePlayer.play()
                                    }else{
                                        let audioPlayer = document.getElementById("audioPlay")
                                        audioPlayer.play()
                                    }
                                }
                            }
                        }else if(e.role===0){
                            // 心跳
                        }else{
                            // 用户离线
                            _this.chatList.menu.forEach((element) => {
                                if(element.user_id==e.user_id){
                                    element.state=0
                                    _this.listSort()
                                }
                            })
                            // 推送用户离线
                            axios.request({method:'put',url:'/admin/consult_dialogue',data:e}).then((res) => {
                            }).catch(() => {
                            })
                        }
                    }
                };
                _this.serviceConfig.online = 1
                _this.ws.onclose = function() {
                    _this.serviceConfig.online = 0
                    clearInterval(_this.heartbeatId);
                    _this.reconnectWebsocket()
                }
                _this.initHeartbeat()
                // 断线重连成功执行移除
                if(_this.serviceConfig.online){
                    clearInterval(_this.intervalId);
                }
            }
        },
        // 关闭连接
        closeWebsocket(){
            let _this = this
            _this.ws.close()
            _this.ws.onclose = function() {
                _this.serviceConfig.online = 0
                // 移除心跳
                clearInterval(heartbeatId.heartbeatId);
                // 移除重连
                clearInterval(heartbeatId.intervalId);
            }
        },
        initHeartbeat(){
            let _this = this
            _this.heartbeatId = setInterval(() => {
                _this.ws.send(JSON.stringify({role:0,text:'ping'}))
            }, 20000)
        },
        // 断线重连-主动断开不触发
        reconnectWebsocket(){
            let _this=this
            _this.ws=null
            if(_this.serviceConfig.lively){
                _this.intervalId = setInterval(() => {
                    _this.initWebsocket()
                }, 2000)
            }
        },
        readMessage(e){
            let _this = this
            let a={type:1,role:101,user_id:e,text:''}
            _this.postMessage(a)
        },
        thisTimeRevocation(e){
            let t=e.replace(/ /g, 'T')
            let givenTime = new Date(t);  
            let currentTime = new Date();  
              
            // 计算两个时间之间的毫秒差  
            let diffInMilliseconds = currentTime - givenTime;  
              
            // 将毫秒差转换为秒  
            let diffInSeconds = Math.floor(diffInMilliseconds / 1000); 
            if(diffInSeconds>60){
                return false
            }else{
                return true                
            }
        },
        startCountdown() {  
            let _this =this
            let countdownMs = 5000;  
            let startTime = Date.now();  
          
            // 创建一个定时器，每秒更新一次  
            const intervalId = setInterval(() => {  
                // 计算已经过去的时间  
                let elapsedMs = Date.now() - startTime;  
                // 计算剩余时间（毫秒）  
                let remainingMs = countdownMs - elapsedMs;  
          
                // 如果剩余时间小于0，说明倒计时结束  
                if (remainingMs <= 0) {  
                    clearInterval(intervalId); // 清除定时器  
                } else {  
                    // 将剩余时间转换为秒并显示（这里只是打印到控制台，你可以根据需要更新页面上的元素）  
                    let remainingSeconds = Math.floor(remainingMs / 1000);  
                    _this.serviceConfig.interval=remainingSeconds
                }  
            }, 1000); // 每秒更新一次  
        },
        deleteMenu(i,e){
            vant.Dialog.confirm({
                confirmButtonText:this.$t('message.service_ui.confirm'),
                cancelButtonText:this.$t('message.service_ui.cancel'),
              title: this.$t('message.service_ui.confirmDelete'),
              message: e.nickname,
            })
              .then(() => {
                let _this = this
                if(e.state){
                    // 不可删除
                    _this.$message({
                      message: _this.$t('message.service_ui.user_link_no_del'),
                      type: 'warning'
                    });
                    return false;
                }
                axios.request({method:'delete',url:'/admin/consult_dialogue?id='+e.id}).then((res) => {
                    _this.$message({
                      message: res.data.message,
                      type: 'success'
                    });
                    if(i===0){
                        // 移除第一个时
                        if(_this.chatList.menu.length>1){
                            _this.chatList.menu.splice(i, 1)
                            _this.clickMenu(1,_this.chatList.menu[0])
                        }else{
                            _this.chatList.menu.splice(i, 1)
                            _this.chatList.menu=[]
                            _this.menuSelected=1
                        }
                    }else{
                        _this.chatList.menu.splice(i, 1)
                        _this.clickMenu(1,_this.chatList.menu[0])
                    }
                  }).catch(() => {
                      
                  })
              })
              .catch(() => {
                // on cancel
              });
        },
        // 消息历史记录
        historyOpen(){
            this.history.status=true
            this.initHistory()
        },
        initHistory(){
            let _this=this
            _this.history.loading=true
            axios.request({method:'get',url:'/admin/consult_history',params:_this.history.load}).then((res) => {
                _this.history.table=res.data.data.data
                _this.history.total=res.data.data.total
                _this.history.loading=false
              }).catch((e) => {
                _this.history.loading=false
              })
        },
        searchHistory(){
            this.initHistory()
        },
        thisPage(e){
            this.history.load.page=e
            this.initHistory()
        },
        thisSize(e){
            this.history.load.count=e
            this.history.load.page=1
            this.initHistory()
        },
        historyDetail(e){
            let _this=this
            _this.history.detail.status=true
            _this.history.detail.load.more=true
            _this.history.detail.nickname=e.nickname
            _this.history.detail.load.id=e.id
            axios.request({method:'get',url:'/admin/consult_history?id='+e.id+'&page='+_this.history.detail.load.page}).then((res) => {
                _this.history.detail.list=res.data.data
                _this.chatRecordHeight()
                if(res.data.data.contentDetail.length<30){
                    // 已经最后一页
                    _this.history.detail.load.more=false
                }else{
                    _this.history.detail.load.page=_this.history.detail.load.page+1
                }
                if(_this.history.detail.on){
                    _this.initRecordPage(e)
                    _this.history.detail.on=0
                }  
              }).catch((e) => {
              })
        },
        closeHistoryDetail(){
          this.history.detail.load.page=1
          this.history.detail.load.more=true
        },
        historyDelete(e){
            vant.Dialog.confirm({
                confirmButtonText:this.$t('message.service_ui.confirm'),
                cancelButtonText:this.$t('message.service_ui.cancel'),
              title: this.$t('message.service_ui.warning'),
              message: this.$t('message.service_ui.confirmDelete'),
            })
              .then(() => {
                let _this = this
                axios.request({method:'delete',url:'/admin/consult_history?id='+e.id}).then((res) => {
                    _this.$message({
                      message: res.data.message,
                      type: 'success'
                    });
                    _this.initHistory()
                  }).catch(() => {
                      
                  })
              })
              .catch(() => {
                // on cancel
              });
        },
        initRecordPage(e){
            let _this = this
            const drawerBody = document.querySelector('.app-consult-table-detail .el-drawer__body');  
            drawerBody.addEventListener('scroll', function() {  
                // 检查是否滚动到顶部  
                if (drawerBody.scrollTop === 0) {  
                    // 触发加载更多内容的函数  
                    if(_this.history.detail.load.more){
                        //有更多
                        _this.history.detail.load.loading=true
                        axios.request({method:'get',url:'/admin/consult_history?id='+_this.history.detail.load.id+'&page='+_this.history.detail.load.page}).then((res) => {
                            _this.history.detail.list.contentDetail.unshift(...res.data.data.contentDetail)
                            if(res.data.data.contentDetail.length<30){
                                // 已经最后一页
                                _this.history.detail.load.more=false
                            }else{
                                _this.history.detail.load.page=_this.history.detail.load.page+1
                            } 
                            _this.history.detail.load.loading=false
                          }).catch((e) => {
                            _this.history.detail.load.loading=false
                          })
                    }
                }  
            });  
        },
        initService(){
            let _this=this
            axios.request({method:'get',url:'/admin/consult_service?info=info'}).then((res) => {
                _this.info=res.data.data
              }).catch((e) => {
              })
        },
        listSort(){
            let _this = this
            if(_this.chatList.menu.length>0){
                if(_this.chatList.listSortStatus){
                    _this.chatList.listSortStatus=false
                    let thisKey=_this.menuSelected
                    let thisList=_this.chatList.menu[_this.menuSelected-1].user_id
                    // 分离在线和离线消息  
                    let onlineMessages = [];  
                    let offlineMessages = [];  
                      
                    _this.chatList.menu.forEach(msg => {  
                        if (msg.state === 0) {  
                            offlineMessages.push(msg);  
                        } else {  
                            onlineMessages.push(msg);  
                        }  
                    });
                    // 合并在线和离线消息，离线消息放在后面  
                    let result = onlineMessages.concat(offlineMessages);
                    _this.chatList.menu=result
                    // 重新赋予键值内容
                    if(thisKey>1){
                        // 需要重组
                        _this.chatList.menu.forEach((el,i) => {  
                            if (el.user_id == thisList) {  
                                _this.clickMenu(i+1,el)
                            }
                        });
                    }else{
                        // 初次打开
                        _this.clickMenu(1,_this.chatList.menu[0])
                    }
                    _this.chatList.listSortStatus=true
                }
            }
        },
        newMessageSort(e){
            // 新消息排序
            let _this = this
            if(_this.chatList.menu.length>0){
                if(_this.chatList.listNewMessageStatus){
                    _this.chatList.listNewMessageStatus=false
                    let thisKey=_this.menuSelected
                    let thisList=_this.chatList.menu[_this.menuSelected-1].user_id
                    _this.chatList.menu.forEach((el,i) => {  
                        if (el.user_id == e.user_id) {  
                            // 已经是第一行忽略
                            if(i!==0){
                                if(e.user_id===thisList){
                                    // 当前忽略
                                }else{
                                    let [rowToMove] = _this.chatList.menu.splice(i, 1);  
                                    _this.chatList.menu.unshift(rowToMove); 
                                    _this.chatList.menu.forEach((son,si) => {
                                        if(son.user_id===thisList){
                                            _this.menuSelected=si+1
                                        }
                                    })
                                }
                                
                            }
                        }
                    });
                    _this.chatList.listNewMessageStatus=true
                }
            }
        },
        randomNumber() {  
            const num = Date.now().toString() + Math.random().toString(36).substr(2, 9)
            return String(num)+String(this.chatList.menu[this.menuSelected-1].service_id);
        },
        faceIcon(e){
            let _this=this
            const firstPart = _this.content.slice(0,_this.cursorPosition); // 从开始到指定长度的部分  
            const secondPart = _this.content.slice(_this.cursorPosition);   // 剩余的部分  
            
            // 将要插入的字符添加到第一部分字符串的末尾  
            const newFirstPart = firstPart + e;  
            
            // 重新拼接字符串  
            const newStr = newFirstPart + secondPart; 
            _this.content=newStr
            this.faceVisible=false
        },
        blurMessage(){
            this.cursorPosition = event.target.selectionStart; 
        },
        handleKeyPress(event){
            if(this.clickKey==2){
                if (event.ctrlKey && event.key === 'Enter') {
                    event.preventDefault() // 阻止默认换行行为
                    this.pushMessage()
                }
            }
            if(this.clickKey==1){
                if (event.key === 'Enter') {
                    event.preventDefault() // 阻止默认换行行为
                    this.pushMessage()
                }
            }
        },
        pushSelect(e){
            this.clickKey=e
            localStorage.setItem('app-consult-push',e)
        },
    },
    created(){
        let _this=this
        _this.initWindow()
        _this.$i18n.locale = '{{$lang}}';
        _this.current_lang = '{{$lang}}';
        _this.initWebLang()
        _this.initService()
        _this.initDialogue()
        _this.initVerbalTrick()
        _this.initProduct()
        _this.content=' '
        // Cookies.remove('consult_line_status')
        // Cookies.remove('consult_line_sound')
        if(Cookies.get('consult_line_status')===undefined){
            // 不存在--连接通讯
            _this.serviceConfig.lively=1
        }else{
            let s=Cookies.get('consult_line_status')
            if(s==='true_status'){
                // 在线
                _this.serviceConfig.lively=1
            }else{
                // 离线
                _this.serviceConfig.lively=0
            }
        }
        if(Cookies.get('consult_line_sound')===undefined){
            // 不存在--默认开启声音
            _this.serviceConfig.sound=1
        }else{
            let s=Cookies.get('consult_line_sound')
            if(s==='true_status'){
                // 声音
                _this.serviceConfig.sound=1
            }else{
                // 静音
                _this.serviceConfig.sound=0
            }
        }
        setTimeout(function(){ 
            _this.content='' 
            if(_this.serviceConfig.lively){
               _this.initWebsocket()
             }else{
                 _this.serviceConfig.online=0
             }
        }, 200);
    },
    mounted(){
        // let _this=this
        // setTimeout(function(){ 
        //     _this.initRecordPage()
        // }, 1000);
        // this.emoji.img_sets.apple.path='/plugin/consult/image/emoji/'
        this.initMenuContentPage()
        if(localStorage.getItem('app-consult-push')){
            this.clickKey=localStorage.getItem('app-consult-push')
        }else{
            localStorage.setItem('app-consult-push',this.clickKey)
        }
        setInterval(() => {
            axios.request({method:'get',url:'/admin/consult_ping'}).then((res) => {
              }).catch((e) => {
              })
        }, 180000)
    },
    watch: {
        menu_search: function(n) {
            if(n==''){
                this.chatList.menu.forEach((element) => {
                  element.status = 1
                })
            }else{
                this.chatList.menu.forEach((element) => {
                  if(element.nickname.indexOf(n) !== -1){
                    element.status = 1
                  }else{
                    element.status = 0
                  }
                })
            }
        },
        verbal_search: function(n) {
            if(n==''){
                this.verbalTrickList.forEach((element) => {
                  element.status = 1
                })
            }else{
                this.verbalTrickList.forEach((element) => {
                  if(element.ask.indexOf(n) !== -1){
                    element.status = 1
                  }else{
                    element.status = 0
                  }
                })
            }
        },
        product_search: function(n) {
            if(n==''){
                this.productList.forEach((element) => {
                  element.state = 1
                })
            }else{
                this.productList.forEach((element) => {
                  if(element.name.indexOf(n) !== -1){
                    element.state = 1
                  }else{
                    element.state = 0
                  }
                })
            }
        },
        order_search: function(n) {
            if(n==''){
                this.orderList.forEach((element) => {
                  element.state = 1
                })
            }else{
                this.orderList.forEach((element) => {
                  if(element.number.indexOf(n) !== -1){
                    element.state = 1
                  }else{
                    element.state = 0
                  }
                })
            }
        },
        footprint_search: function(n) {
            if(n==''){
                this.footprintList.forEach((element) => {
                  element.state = 1
                })
            }else{
                this.footprintList.forEach((element) => {
                  if(element.name.indexOf(n) !== -1){
                    element.state = 1
                  }else{
                    element.state = 0
                  }
                })
            }
        }
    }
})
Vue.use(vant.Lazyload);
</script>
<style>
.page-title-box{
    display: none !important;
}
/*主题*/
.el-button--primary {
    background-color: #fd560f;
    border-color: #fd560f
}

.el-button--primary:focus,.el-button--primary:hover {
    background: #e34d0d;
    border-color: #e34d0d;
}

.el-button--primary.is-active,.el-button--primary:active {
    background: #e34d0d;
    border-color: #e34d0d;
}
.el-button--primary.is-disabled,.el-button--primary.is-disabled:active,.el-button--primary.is-disabled:focus,.el-button--primary.is-disabled:hover {
    background-color: #feaa87;
    border-color: #feaa87;
}
.el-button.is-plain:focus,.el-button.is-plain:hover {
    border-color: #feaa87;
    color: #feaa87;
}
.el-button.is-active,.el-button.is-plain:active {
    color: #feaa87;
    border-color: #feaa87;
}
.el-tabs__item.is-active{
    color: #fd560f;
}
.el-tabs__item:hover {
    color: #fd560f;
}
.el-tabs__active-bar{
    background-color: #feaa87;
}
.el-upload--picture-card:hover,.el-upload:focus {
    border-color: #212529;
    color: #212529;
}
.el-upload--picture-card{
    width: 80px !important;
    height: 80px !important;
    line-height: 78px !important;
}
.el-upload-list--picture-card .el-upload-list__item{
    width: 80px !important;
    height: 80px !important;
}
.el-upload:focus .el-upload-dragger {
    border-color: #212529;
}
.el-input.is-active .el-input__inner,.el-input__inner:focus {
    border-color: #fd560f;
}
.el-dialog__headerbtn:focus .el-dialog__close,.el-dialog__headerbtn:hover .el-dialog__close {
    color: #fd560f;
}
.spanarea__inner:focus {
    border-color: #fd560f;
}
.el-select .el-input__inner:focus {
    border-color: #fd560f;
}
.el-range-editor.is-active,.el-range-editor.is-active:hover,.el-select .el-input.is-focus .el-input__inner {
    border-color: #fd560f;
}
.el-select-dropdown__item.selected {
    color: #fd560f;
}
.app-consult-right-roll-list .van-cell{
    padding: 10px 12px !important;
}
.app-consult-right-roll-list .van-card{
    padding: 10px 12px !important;
    background-color: #fff;
}
.el-button--default:hover{
    color: #fd560f;
    border-color: #feccb7;
    background-color: #ffeee7;
}
.el-button--default:focus{
    color: #fd560f;
    border-color: #feccb7;
    background-color: #ffeee7;
}
.van-dialog{
    border-radius: 2px !important;
}
.el-dialog{
  display: flex;
  flex-direction: column;
  margin: 0 !important;
  position: absolute;
  top: calc(50% - 0.5px);
  left: calc(50% - 0.5px);
  transform: translate(calc(-50% + 0.5px), calc(-50% + 0.5px));
  max-height: calc(100% - 30px);
  max-width: calc(100% - 30px);
}
 
.el-dialog .el-dialog__body {
  flex: 1;
  overflow: auto;
  padding: 10px 20px;
}
.el-dialog__body{
    max-height: 70vh;
}
.van-card__price{
    color: #ff0000;
    font-weight: bold;
}
.app-consult-switch .el-switch__label {
    position: absolute;
    display: none;
    color: #fff;
}
/*打开时文字位置设置*/
.app-consult-switch .el-switch__label--right {
    z-index: 1;
    right: -5px;    /*不同场景下可能不同，自行调整*/
}
/*关闭时文字位置设置*/
.app-consult-switch .el-switch__label--left {
    z-index: 1;
    left: 20px;    /*不同场景下可能不同，自行调整*/
}
/*显示文字*/
.app-consult-switch .el-switch__label.is-active {
    display: block;
}
.app-consult-switch.el-switch .el-switch__core,
.el-switch .el-switch__label {
    width: auto !important;    /*开关按钮的宽度大小*/
    min-width: 55px;
}
/*主题*/
.main-content>#content{
    padding: 1rem 1rem 0 1rem !important;
}
#copyright-text{
    margin-bottom: 0px !important;
    margin-top: 10px !important;
}
.AppConsult{
    background: #ffffff;
    border: 1px solid rgba(231,234,243,.7);
    box-sizing: border-box;
    height: calc(100vh - 108px);
}
.AppConsult .el-tabs__item{
    padding: 0 20px;
}
.app-consult-layout{
    height: 100% !important;
}
.app-consult-aside{
    width: 330px !important;
}
.app-consult-main{
    border-left: 1px solid rgba(231,234,243,.7);
    border-right: 1px solid rgba(231,234,243,.7);
    padding: 0 !important;
    box-sizing: border-box;
}
.app-consult-left{
    height: 100%;
}
.app-consult-left-menu-search{
     border-bottom: 1px solid rgba(231,234,243,.7);
     padding: 0px !important;
     height: 55px !important;
     box-sizing: border-box;
}
.app-consult-left-menu .van-cell{
    padding: 10px 12px !important;
    cursor: pointer;
}
.app-consult-left-menu-selected{
    background-color: #ffeee7;
    cursor: auto !important;
}
.app-consult-left-menu .van-cell:hover{
    background-color: #ffeee7;
}
.app-consult-left-menu-footer{
     border-top: 1px solid rgba(231,234,243,.7);
     padding: 0px 12px !important;
     height: 55px !important;
     display: flex;
     box-sizing: border-box;
     align-items: center;
     gap: 10px;
     overflow: hidden;
}
.app-consult-left-menu{
    padding: 0px !important;
}
.app-consult-left-menu-avatar{
    margin-right: 5px;
}

/* 隐藏滚动条 */
.app-consult-left-menu::-webkit-scrollbar {
    display: none;
}
 
/* 确保内容可滚动 */
.app-consult-left-menu {
    overflow-y: scroll; /* 对于垂直滚动 */
    scrollbar-width: none; /* Firefox */
    overflow-y: scroll; /* 对于垂直滚动 */
}
.app-consult-left-menu-box{
    display: flex;
    align-items: center;
}
.app-consult-left-menu-title{
    width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.app-consult-left-menu-time{
    margin-left: auto;
    font-weight: normal;
}
.app-consult-left-menu-box .van-tag{
    margin-left: auto;
    background-color: #fd560f;
    border-radius: 28px 28px 28px 0px;
    justify-content: center;
}
.app-consult-avatar-filter {
    filter: grayscale(90%)
}
/*内容*/
.app-consult-main-content{
    padding: 0 !important;
    height: 100%;
}
.app-consult-main-content-header{
     border-bottom: 1px solid rgba(231,234,243,.7);
     padding: 0px 12px !important;
     height: 55px !important;
     display: flex;
     align-items: center;
     box-sizing: border-box;
}
.app-consult-main-content-box-header{
     border-bottom: 1px solid rgba(231,234,243,.7);
     padding: 0px 12px !important;
     height: 46px !important;
     display: flex;
     align-items: center;
     box-sizing: border-box;
     gap: 10px;
     white-space: nowrap;
     overflow: hidden;
}
.app-consult-main-content-footer{
     border-top: 1px solid rgba(231,234,243,.7);
     min-height: 55px;
     height: auto !important;
     padding: 0px !important;
     box-sizing: border-box;
}
.app-consult-main-content-footer-other{
     min-height: 40px;
     display: flex;
     align-items: center;
     padding: 0px 12px !important;
     box-sizing: border-box;
}
/*.app-consult-main-content-footer-other .el-upload-list .is-success{*/
/*    display: none !important;*/
/*}*/
/*.app-consult-main-content-footer-other .el-upload-list__item-name{*/
/*    display: none !important;*/
/*}*/
/*.app-consult-main-content-footer-other .el-upload-list__item-status-label{*/
/*    display: none !important;*/
/*}*/
/*.app-consult-main-content-footer-other .el-upload-list .el-icon-close{*/
/*    display: none !important;*/
/*}*/
/*.app-consult-main-content-footer-other .el-upload-list .el-icon-close-tip{*/
/*    display: none !important;*/
/*}*/
.app-consult-main-content-footer-edit{
     display: flex;
     align-items: center;
     border-top: 1px solid rgba(231,234,243,.7);
     padding: 0px 12px 0px 0px !important;
     min-height: 55px;
     box-sizing: border-box;
}
.app-consult-edit-padding{
    margin-right:10px;
}
.app-consult-main-transfer{
    padding: 0px !important;
}
.app-consult-main-other{
    align-items: center;
}
/*右侧内容*/
.app-consult-right{
    height: 100%;
    position: relative;
}
.app-consult-right-search{
    display: flex;
    align-items: center;
     border-bottom: 1px solid rgba(231,234,243,.7);
     padding: 0px !important;
     height: 55px !important;
     box-sizing: border-box;
}
.app-consult-right-tabs{
    width: 100%;
    overflow: hidden;
}
.app-consult-right-tabs .el-tabs__header{
    margin-bottom: 0 !important;
 border-bottom: 1px solid rgba(231,234,243,.7);
}
.app-consult-right-tabs .el-tabs__nav-wrap{
    padding: 0px 12px 0px 12px;
    box-sizing: border-box;
}
.app-consult-right-tabs .el-tabs__nav-wrap::after{
    height: 0px !important;
    background-color: rgba(231,234,243,.7);
}
.app-consult-right-tabs .el-tabs__item{
    height: 55px;
    line-height: 55px;
}
.app-consult-right-tabs .el-tabs__nav-next,.app-consult-right-tabs .el-tabs__nav-prev{
    line-height: 55px;
    font-size: 18px;
}
.app-consult-info-return-icon{
    width:34px;
    height:34px;
    border-radius:50%;
    background:#f7f8fa;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-left: 12px;
    cursor: pointer;
    position: absolute;
    z-index: 99;
    top: 10px;
    font-size: 16px;
}
.app-consult-info-add-icon{
    width:34px;
    height:34px;
    border-radius:50%;
    background:#f7f8fa;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-right: 12px;
    cursor: pointer;
}
.app-consult-right-more{
    padding: 0;
}
.app-consult-right-roll-list{
    height:calc(100vh - 219px);
}
/* 隐藏滚动条 */
.app-consult-right-roll-list::-webkit-scrollbar {
    display: none;
}
 
/* 确保内容可滚动 */
.app-consult-right-roll-list {
    overflow-y: scroll; /* 对于垂直滚动 */
    scrollbar-width: none; /* Firefox */
    overflow-y: scroll; /* 对于垂直滚动 */
}
.app-consult-more-picture{
    display: inline-block;
    margin-right: 10px;
    margin-top:10px;
}
.app-consult-more-picture-size{
    width: 40px;
    height: 40px;
    border-radius: 2px;
}
.app-consult-more-operate{
    margin-top: 10px;
}
.app-consult-upload-more{
    width:80px;height:80px;display:flex;align-items:center;justify-content:center;cursor:pointer;border:1px dashed #DCDFE6;box-sizing:border-box;border-radius:4px;
}
.app-consult-main-content-box{
    padding: 0px;
    overflow: hidden;
}
.app-consult-main-translate{
    flex-grow: 1;
    min-width: 100px;
}
.app-service-form-item{
    margin-bottom: 10px;
}
.app-service-form-item .el-input-group__prepend{
    width: 120px;   
}
.app-consult-switch-auto-config{
    margin-left: auto;
}
.app-consult-more-lang-list{
    margin-bottom: 18px !important;
}
.app-consult-translate-select{
    display:flex;align-items:center;gap:10px;margin-bottom:20px;
}
/*表格*/
.app-consult-table-header{
    padding: 0;
    display: flex;
    align-items: center;
    height: 36px !important;
    margin-bottom: 16px;
    gap: 10px;
}
.app-consult-table-main{
    padding: 0;
}
.app-consult-table-footer{
    padding: 0;
    display: flex;
    align-items: center;
    height: 36px !important;
    margin-top: 16px;
}
.app-consult-table-detail{
    width: 600px !important;
}
.app-consult-table-detail .el-drawer__header{
    margin-bottom: 20px;
}
.app-consult-transfer .el-empty__image{
    width: 100px;
}
.app-consult-delete-button{
    height: 100%;
}
.app-consult-newline{
    white-space: pre-wrap;
}
.app-consult-loading{
    display: flex;
    align-items: center;
    justify-content: center;
}
.app-consult-loading__spinner--dots {
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: none;
    width: 40px;
    height: 40px;
    animation-duration: 0.8s;
    animation-play-state: running;
}
.app-consult-loading__spinner--dots .app-consult-loading__dot {
    width: 20%;
    height: 20%;
    border-radius: 50%;
    background-color: #fd560f;
    animation-duration: 1.8s;
    animation-name: dotting;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
    animation-fill-mode: both;
    animation-duration: 0.8s;
    animation-delay: 0s;
    animation-play-state: running;
}
@keyframes dotting {
  0% {
    opacity: 0.15;
  }
  1% {
    opacity: 0.8;
  }
  33% {
    opacity: 0.8;
  }
  34% {
    opacity: 0.15;
  }
  100% {
    opacity: 0.15;
  }
}
@media screen and (max-width: 720px) {
    .app-consult-main-content-header{
        display: flex;
        justify-content: space-between;
    }
    /* 小屏幕切换 */
    .app-consult-switch-width100{
        width: 100% !important;
        display: block !important;
    }
    .app-consult-switch-width0{
        width: 0 !important;
    }
    .app-consult-left-menu-selected{
        background-color: #ffffff;
    }
    .app-consult-left-menu .van-cell:hover{
        background-color: #ffffff;
    }
    .app-consult-main{
        border-left: 0;
        border-right: 0;
    }
    .app-consult-right-tabs .el-tabs__nav-wrap{
        padding: 0px 30px;
        box-sizing: border-box;
    }
    .app-consult-right-tabs .el-tabs__header{
        padding: 0px 10px 0px 60px;
    }
    .app-consult-switch-auto{
        margin-left: auto;
    }
    .app-consult-automatic-translation{
        display: none;
    }
    .app-consult-table-detail{
        width: 80% !important;
    }
    .app-consult-table-page .el-pagination__sizes{
        display: none !important;
    }
    .app-consult-table-page .el-pager{
        display: none !important;
    }
    .app-consult-main-content-box-header{
         overflow-x: auto;
    }
}
</style>
<style>
.www-filter{
    filter: grayscale(90%);
}
.www-chat-box{
    padding: 0;
    height: calc(100% - 46px);
}
/* 对话内容部分开始 */
.www-chat-content-box{
    padding: 15px 15px 0px 15px;
    box-sizing: border-box;
    overflow: hidden;
}
.www-chat-content-width{
    width: 100%;
    overflow: hidden;
    position: relative;
}
.www-chat-message-time-left{
    position: absolute;
    bottom: 0px;
    left: 50px;
    font-size:12px;
    color:#999;
    /*display: none;*/
}
.www-chat-message-time-right{
    position: absolute;
    bottom: 0px;
    right: 50px;
    color:#999;
    font-size:12px;
}
.www-chat-message-time-right-more{
    /*display: none;*/
}
.www-cursor{
    cursor: pointer;
}
/*.www-chat-content-width:hover .www-chat-message-time-left{*/
/*    display: inline;*/
/*}*/
/*.www-chat-content-width:hover .www-chat-message-time-right-more{*/
/*    display: inline;*/
/*}*/
/* 聊天左边消息 */
.www-chat-left-content{
    position: relative;
    max-width: 80%;
    display: flex;
    margin-bottom: 20px;
    float: left;
}
.www-chat-left-avatar{
    margin: 0px 10px 0px 0px;
    width: 40px;
    height: 40px;
}
.www-chat-message-status{
    font-size:12px;
}
.www-chat-message-status-no{
    color:#ff0000;
}
.www-chat-other{
    margin-left: auto;
}
.www-chat-left-content-show{
    background:#f2f2f2 !important;
    width: calc(100% - 50px);
    min-height: 40px;
    border-radius: 20px 20px 20px 0px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    box-sizing: border-box;
    line-height: 22px;
    font-size: 14px;
}
/* 时间 */
.www-chat-content-time{
    text-align: center;
    margin-bottom: 15px;
    clear: both;
}
/* 聊天右边消息 */
.www-chat-right-content{
    position: relative;
    max-width: 80%;
    display: flex;
    margin-bottom: 20px;
    float: right;
}
.www-chat-right-content-show{
    background:#fd560f !important;
    color:#ffffff;
    width: calc(100% - 50px);
    min-height: 40px;
    border-radius: 20px 20px 0px 20px;
    overflow: hidden;
    display: flex;
    align-items: center;
    padding: 5px 10px;
    box-sizing: border-box;
    line-height: 22px;
    font-size: 14px;
}
.www-chat-right-avatar{
    margin: 0px 0px 0px 10px;
    width: 40px;
    height: 40px;
}
.www-chat-picture-border{
    padding: 0px;
    position: relative;
    border-radius: 5px;
    background: #fff !important;
}
.www-chat-content-edit{
    height: 130px;
}
.www-chat-content-edit .spanarea__inner{
    resize:none;
    box-shadow: none;
    min-height: 130px !important;
}
.www-chat-video-icon{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}
/* 购物卡片 */
.www-chat-shopping-detail{
    width: 280px;
    /*padding: 10px 40px 10px 10px;*/
    box-sizing: border-box;
    position: relative;
    background-color: #fafafa;
}
.www-chat-shopping-card{
    padding: 5px !important;
    margin-top: 0px !important;
}
.www-chat-shopping-card .van-card__price{
    color: #ff0000;
}
.www-chat-content-width-translate{
    margin-top: -10px;
}
.www-chat-content-width-translate .www-chat-left-content-show{
    border-radius: 0px 20px 20px 20px;
}
.www-chat-content-width-translate .www-chat-right-content-show{
    border-radius: 20px 0px 20px 20px;
}
.www-chat-indent-other{
  background: rgba(255, 255, 255, 0) !important;
}
.www-chat-indent-other .van-cell__title{
  width: 70px;
  flex: none !important;
}
.www-chat-indent-other .van-cell__value{
  flex: none !important;
}
.app-consult-push-button{
  white-space: nowrap;
}
.app-consult-push-select{
    color: rgba(0,0,0,0);
}
.app-consult-translate-icon{
    display: flex;
    align-items: center;
    height: 100%;
    width: 22px;
    justify-content: center;
}
/* 对话内容部分结束 */
/*span.emoji {*/
/*	display: -moz-inline-box;*/
/*	-moz-box-orient: vertical;*/
/*	display: inline-block;*/
/*	vertical-align: baseline;*/
/*	*vertical-align: auto;*/
/*	*zoom: 1;*/
/*	*display: inline;*/
/*	width: 1em;*/
/*	height: 1em;*/
/*	background-size: 1em;*/
/*	background-repeat: no-repeat;*/
/*	text-indent: -9999px;*/
/*	background-position: 50%, 50%;*/
/*	background-size: contain;*/
/*}*/

/*span.emoji-sizer {*/
/*	font-size: 32px;*/
/*}*/

/*span.emoji-outer {*/
/*	display: -moz-inline-box;*/
/*	display: inline-block;*/
/*	*display: inline;*/
/*	height: 1em;*/
/*	width: 1em;*/
/*}*/

/*span.emoji-inner {*/
/*	display: -moz-inline-box;*/
/*	display: inline-block;*/
/*	text-indent: -9999px;*/
/*	width: 100%;*/
/*	height: 100%;*/
/*	vertical-align: baseline;*/
/*	*vertical-align: auto;*/
/*	*zoom: 1;*/
/*}*/

/*img.emoji {*/
/*	width: 1em;*/
/*	height: 1em;*/
/*}*/
</style>
@endsection